Switching to angular after working with react?
In this article I have added some points which might be helpful if you are switching from react to angular.
One of the first thing you might have noticed is that in angular, typescript is used. If you do not have experience with typescript then there is no need to worry. You can disable typechecks easily.
The second major difference is that react uses JSX whereas in angular pure HTML along with a few angular-based attributes are used. So be ready to use
class instead of
To create a component in react, we simply create a corresponding js file along with any supporting files (like .css). In angular we have to run
ng g c <name> to create a component. This basically generates a component in the current directory. By default it creates four files:
- .html file
- .ts file
- .css file (or .scss depending upon your selection while creating the angular project)
Another thing you which I have observed is that attributes in angular is very important. All the conditional rendering and loops used in the UI is done using angular-specific attributes. Here's a really good example:
Suppose you want to display all the names in an array using a
<li>. In react one can directly use a forEach like this:
Whereas in angular you have to use
For making API calls, I use either
axios and write the code in the component itself. For larger applications I make a custom http hook and reuse it. In angular we use the
httpModule and unlike react all the api calls for a component are written in
Same as components in angular we need to generate services using
ng g s <name>. This creates a service file and then add your api calls in this file.
To use the api calls in our component we just need to import the service file.
Here's a sample service file:
Now one can import this service file in component and use it this way:
You might see a function block called ngOnInit(). This function is executed every time the component is loaded on the page.
These were some of the basic differences which might help you to start with angular.
Let me know if you want to add something!