How Angular Compares to React (for developers who are curious)
I have just been hired for a company that is using Angular on their tech stack. In preparation to get started I am following a course on Udemy that I will link below.
https://www.udemy.com/course/the-complete-guide-to-angular-2
I am a Javascript developer with experience in React. And although this course is absolutely amazing, it does not relate anything to React (since it is not a course specifically for developers with React experience) And so I wanted to write an Angular article making some basic comparisons to React in order to make it easy to jump into for React developers.
TypeScript
One big difference between React and Angular is that Angular uses strictly Typescript right out of the box. React on the other hand you can choose between the two. On a basic level Typescript adds great features such as types to Javascript that make code easier to debug among other things. It also provides errors and fixes before you even run code. Which as I’m learning has turned out to be fantastic.
There is a small learning curve but the course I linked above is a great way to learn. You don’t just learn how everything works, you see it in action in a real app.
Components
Much like React, Angular uses components. However, components in Angular are a bit different than they are in React. For example, React components are standalone files (something.js) that contain a class (or function) with a render function (or return) featuring JSX. Angular does not use JSX, and components are usually made up of at least 2, but most of the time 3 files nested in a folder of that components name.
These files are the template file, which is an HTML file that contains well… you guessed it… HTML. So think of this like your JSX section of your React components. It functions the same way in that it is what will render on the DOM. But it is actual HTML with some added features provided by Angular. Developers with experience in HTML will feel at home.
The second and most important file is the typescript file that configures the component. This is where you can create functions and variables that can be referenced in the HTML template file. Which can make your component dynamic and take in or output information from and to other components.
The third file is the CSS or SCSS file that you can use to style your component.
A fourth file is your test file which will allow you to test that your components are working.
INTERACTING WITH THE DOM
Property Binding and Data Binding
Property binding allows you to use HTML properties only when a certain condition is met. You do this by putting the property in square brackets and giving it a condition inside a quotations like so:
<p [disabled]=”show === false”>Hello World</p>
Now in your component you would create a variable “show” that you can toggle true and false. This will essentially only attach the “disabled” property to this html element when show is false.
Event Binding, and String Interpolation
In a React JSX component you can fire events like you would an html component. For example you can use an onClick event inline to fire a function from that component.
Angular allows you to do the same with Event binding with a different syntax.
<button (click)=”fireFunction()”>Click Me</button>
On the click of this component the “fireFunction” function will fire.
You can also access a variable from your typescript file with string interpolation:
<p>{{ variable }}</p>
This will look similar to what you’ve done in React.
Two Way Data Binding
Two way data binding allows you to not only have access to a variable within your component but also change it from the html. For example you may want to change a variable from an input.
In your component you can have a variable:
testVariable = “Testing 123”;
And in your html you can use ngModel:
<input type=”text” ([ngModel])=”testVariable”></input>
This will fill the input with the string “testVariable” and when changed it will be reflected in the actual variable.
(In order to do this you need to use the FormsModule in your app.
Directives
Directives are a key building block in Angular. All they are is instructions in the DOM.
We can build our own directives or use some built in Angular Directives.
For example we can use *ngIF to only render a component based on a condition.
<p *ngIf=”letItRender === true”>Please Render Me</p>
CONCLUSION
There is a lot more to learn about Angular but these are some of the basics that have hopefully clarified how different Angular is from React. In the end they are just different ways of interacting with the DOM through components.
Learning Angular is a great way to quickly learn Typescript and to learn a new way of building apps. Learning has helped me put in perspective how both frameworks work behind the scenes. It’s different syntax etc. but it is using classes to do essentially the same thing. Manipulate the DOM with functions and variables.
Again here is the Udemy course I am taking, I would recommend doing the same if you have any interest!
https://www.udemy.com/course/the-complete-guide-to-angular-2
Please follow me on Twitter @thedrewprint and find me on LinkedIn at Andrew Richards. Thanks for reading!
