Angular Standalone components 01: Introduction and how to create standalone component
Angular 14 has introduced standalone components as a development preview. This suggests that Angular is encouraging us to experiment with the standalone component feature. In Angular 15, standalone components are expected to be fully stable.
Now, what is a standalone component? 🧩
Standalone components in Angular provide a streamlined approach to building applications by reducing the reliance on NgModules. They simplify development by minimizing the necessity for NgModules, allowing existing applications to adopt this approach gradually and without disruptions. This includes components, directives, and pipes, enhancing the overall development experience.
Why Should You Use Them? 🤔
Imagine being able to create components without the hassle of dealing with complex NgModules. Standalone components allow you to do just that! They free you from some of the overhead that comes with traditional Angular development. You can gradually adopt this approach in your existing applications without any major disruptions. 🌈
How to create stand alone components?
It’s very simple, firstly remove the component in declaration section where ever you have declared in module file.
secondly, in @component decorator make standalone as true. As shown in the below code.
Next step,
In the component wherever we are using, declare the component in import section of @component decorators.
Lastly, take the component and declare the component in app.module.ts file in import section. (ie, secondComponent declare it import section of app.module.ts).
This is it, Now we have excluded ngModule file creation and importing it and exporting that ngModule file to our main module. We have this benefit in one hand. But still we are thinking we will have to import in component that we need to use as a standalone.
Here we have greater improvement in performance wise. Now the component is loaded whenever specifically needed.
Up Next
Angular standAlone component 02: Standalone Directives
— — — — — — — — — End Of Blog — — — — — — —
Check All lessons of Angular Intermediate Lessons
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b
