Member-only story
React vs Angular: Components compared
How are Angular components similar to and different from React components
Every day, we face front-end challenges, and the most common is building a reusable environment with components.
There is no doubt that every developer has their own code style, but for now, I will try to show how we can use components in React and in Angular, the differences, and the advantages.
API
Let’s look at React first and take a simple card for discussion.
Above, you can see that we have a Card that receives only children components as props and wraps them with unique styles for this reusable component.
We also have Header, Body, and Footer components. They are completely standalone except that they are exported as parts of a Card. See below:
We simply import Card and automatically have Header, Body, and Footer inside.
Q & A
Q: Can we use it outside of the Card?
A: Yes, but you have to import the whole Card not just Header.
What about Angular — is this as simple as above?
Let’s see!
Angular is very different when it comes to building a component. We cannot build function by function because of the Angular-specific ecosystem and TypeScript.
Above, you can see that we’ve created a custom component app-card that can accept a custom template inside. Then, you can see appCardHeader, appCardBody, and appCardFooter. It’s different, isn’t…
