Learning Angular as a React Developer (feat. Frontend Mentor)

7 min readSep 30, 2021

The contrast between blue and red is palpable—is it the same for React and Angular? Photo by Tamanna Rumee

For the past three years, the web products I have worked with all used ReactJS as the frontend framework. There wasn’t much ROI for me in learning a new one—whether it was Angular or Vue—as I wouldn’t be exposed much to codebases that use either, anyway.

That changed when I began my job hunt two months ago. Suddenly there’s value in learning new frameworks, particularly Angular, since several of the roles I’m eyeing use it. If there wasn’t a good time before to learn it, I certainly carved out some time to start then.

So roll up your sleeves, because we’re going to dive into Angular. Here’s how my battle plan looks like:

Getting an Overview
Setting Up Our Local Environment
Following the Cart App Tutorial
Creating a Tip Calculator App (feat. Frontend Mentor)
Wrapping Up

Getting an Overview

The first step was to get a grasp of what Angular is—what are its features, how does it compare vs other frameworks, and what are the Angular-powered websites out there that I may know of.

Here’s a TL;DR:

Angular is cross-platform—meaning one codebase can produce a Progressive Web App, native app, and/or a desktop app. Pretty nifty. As for built-in tools you can utilize for better website performance, they include code-splitting, preloading, and efficient serving. More about those here.
LogRocket did an Angular vs React vs Vue side-by-side performance comparison. The results are shown here. Long story short, Angular is best for enterprise-grade apps with very dynamic content. Not really suggested however for supposedly lightweight apps (as it’s overkill for that), or if SEO is a main consideration (as React/Vue apps tend to win Google over due to them being more lightweight). Reading these, I get the notion that your app has to cross a certain complexity threshold for Angular to start being “worth it”. (Correct me if I’m wrong!)
Of course everything Google is made with Angular. Other Angular-powered sites include McDonald’s, UPS, Walgreens, Delta, and Indiegogo.

Now that’s done and over with, let’s prep our tools so we can start coding.

Setting Up Our Local Environment

Basically, you just need three things:

Since we’re coming from a React dev environment, we should have the first two checked out already. So what’s left is the CLI itself:

npm install -g @angular/cli

Once you have the CLI, you can create new apps in a whim using ng new my-angular-app, then start them up by running npm install and ng serve -o afterwards.

Following the Cart App Tutorial

Nothing like getting your hands dirty, am I right? I breezed through the tutorial, and these were my initial thoughts:

Just like how it was tricky for me before to identify where JavaScript ends and React begins, it’s the same now with Angular and TypeScript. I may be a special case for not learning it earlier—but if like me, you’re used to .jsx and haven’t written code in .ts before, TypeScript is this other framework whose features and “why’s” you have to be aware of so it doesn’t get mixed with the Angular principles you’re about to learn.
Both route and component creation take more steps than what I was used to. For the routes—GatsbyJS really did pamper me, as I just had to create a route-1.js file in the /pages directory, and boom, it’s a route. For components, I had to mind TypeScript conventions as well, so that’s definitely more steps than creating a simple JSX.
I had to rewire the pattern in my head on [property] and (event) binding. I realized this when I was tinkering with forms, and I had to learn EventEmitters and whatnot. The proper syntax (using square brackets or parentheses) has to be followed as well, otherwise Angular would just look at your passed values as string literals.

<button name="product.name" [title]="'Buy ' + product.name" (click)="handleClick()">
 Add {{ product.name }} to cart
</button>// All correct except for the name attribute—Angular will read it as the static value "product.name" without the square brackets

Figuring out how to handle global and local state management is a challenge. Honestly—I like React Hooks. They’re nifty and get the job done without much pizzazz. I’m trying to draw parallels with my favorite Hooks, useContext + useReducer, and it seems Angular’s counterpart is the Service. Later on I’ll be implementing this as I make my mini-app, so stay tuned for that.
Rendering without ternaries or .map is nice for a change. Template expressions are pretty handy. Pipes are cool, too.

<ul *ngIf="fruits">
  <li *ngFor="let fruit of fruits">
    {{ fruit.name }} will expire {{ fruit.expiry | date:"MM/yyyy" }}
  </li>
</ul>

Now that we’re done with the tutorial… what’s next?

Creating a Tip Calculator App

Finishing the cart app is a nice start, but that was a guided walkthrough. To make sure these principles stuck well, we have to be able to repeat it ourselves and transmit it to others (major motive behind why I’m writing, too 😅). What better way to test what we learned—or what we’ve struggled with—than by creating our own application?

Because we need most of the brain work channeled to implementing an app the Angular way rather than deciding what its features are or its look and feel, I found it best to look for an existing challenge from Frontend Mentor and focus on making an Angular app out of it.

I chose the Tip Calculator. Here’s the challenge brief.

Tip calculator app Frontend Mentor challenge

It’s very easy to get started, and everything is laid out in the starter kit (even the assets, colors and fonts).

I found it best to chunk my coding sessions into three parts:

Complete the UI
Fix up the functionalities and state management
Polish the app and deploy it

Not bad for a plan—let’s see how it goes. 😂

(Insert “x days later” Spongebob meme)

It took lots of going back and forth in the docs as well as scouring sample apps and articles, but after completing these milestones, my Angular tip calculator is now up here: tip-calc.caye.codes! (See Github repo)

You can see my submission on Frontend Mentor here.

My knowledge regarding Angular is still in the beginner phase, so obviously I don’t know what I don’t know… yet. But since I’m basing off of my React experience as well, here are some things I know I have to improve on (and would appreciate feedback for!):

How to do global state management — For storing inputs and calculated results, I used a Service and Observables as stated in this guide, but I feel like how I implemented it myself is too complicated. How is global and local state usually managed in Angular?
How to subscribe to changing values — Preferably, I would’ve stored just the inputs in the global state, and not the calculated results (because they are just derived values). But I haven’t found a way for my display-screen component to 1) subscribe to inputs and recalculate results, and then 2) store in local state every time they change. In React, I would’ve done this by calling state from (app) Context, then have useEffect track changes and recalculate as needed. I haven’t found the “Angular way” to do this yet. So my results are stored globally, and it recalculates and restores data in the service itself. Are there alternatives to what I did?
Form validation — In my past React projects, I’ve used Formik and Yup to validate forms. What’s the usual for Angular projects with lots of forms?
Weird first render — Not really a question, but a side note: My deployed site shows the vanilla index.html (no formatting) for a split second then becomes OK after. I’m not sure if this is a Netlify or Angular or code optimization thing 😅

Wrapping Up

Angular is a very valuable framework to learn as many enterprises are using it, thus creating the demand for Angular-oriented devs. If you’re coming from a React background, there will inevitably be some brain-rewiring to the patterns you’re used to while learning this new framework. There’s more boilerplate code involved, and compared to my React learning curve, I will hazard to say that Angular’s is a little bit steeper.

I stand by the idea that the best way to learn anything new is to create something with it. Frontend Mentor has been incredibly helpful with this task, as having pre-made challenges offloaded most of the brain work involved in app conceptualization. This enables beginners to truly focus on the implementation part.

You can only learn so much on your own, which is why a helpful community giving consistent feedback matters. The iterative cycle of implementing something, getting feedback for it, and reverting to correct previously held notions/patterns is how you become a better developer. (Or how you become a better person, in general.)

Thanks for reading through my Angular learning journey! As always, feedback is appreciated, so feel free to leave comments below. ❤️