Switching to angular after working with react?
Tags: webdev, react, angular, beginners
Published: 2022-01-02 09:43:08

This is the world of javascript frameworks right! Numerous frontend frameworks are available and there is a good chance that when you move to a different project or switch to a different company the framework being used is different. It is important to be flexible and be comfortable working with multiple frameworks because all these frameworks have one thing in common: **JAVASCRIPT** 

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 `className`.

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)
* .spec.ts file
You can ignore the .spec.ts or even delete it at the beginning 
Unlike React the UI and the supporting Javascript and its functions are in two separate files (.ts and .html)

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:

![React-array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bemeczv97wujrt1xlz7e.png)

Whereas in angular you have to use `*ngFor` attribute:

![angular-array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v429dvowfea17c9pdgq.png)

For making API calls, I use either `fetch` or `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 `services`. 
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:

![service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3bdkqll8m8ce0g11eba.png)

Now one can import this service file in component and use it this way:

![service-in-component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6by4gcqubaeoy39pha3i.png)

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!