Getting Started with Standalone Components in Angular

Join the Angular team's very own Jessica Janiuk as she guides us through the getting started with the brand new Standalone Components feature in Angular.

Join the conversation online:

Example Code:

[kedevked]

Angular keeps on becoming better and better 🎉🙏🏾

[bestraub]

Finally! This was the main feature angular was missing, compared to react and vue. It makes refactoring so much easier (just because less files are involved).

[rajtkbabu]

Amazing feature, when building with react component, we expected something we need here in Angular also..
Thanks you Angular team..

[lukash]

Love this new feature! Used it already in prod project.

[nahuelleiva]

This is an amazing feature because it reduces the number of files you'll need to handle in your project but I think it will be widely used to implement small components rather than bigger ones.

For bigger/larger/more complex components, having separate things will be a cleaner and wiser approach. I don't see a component with a certain level of high complexity being developed using standalone components, having that much HTML code inside a single file could be a bit messy to deal with. But it's my guess, I could be wrong.

[yuriimarshalofficial]

Thanks for explaining, I rewrote the project today, removed all modules and set components as standalone. Now I feel like the most standalone programmer with all that provider functions at main.ts file. The framework is moving to splitted direct dependencies more and more. That's the great decision but also I so used to work with modules) For now my feature folder is determined with routing of lazy loading components. Please create more examples of all native modules providers that were wrapped by functions with new naming 🙏❤

[josephsackeykontor]

I love this feature. Finally, it is here

[thominchrist]

Great api, the ngmodule was time consuming for quick startup.
But lazy loaded was existing in previous version

[JuanPablodelaTorre]

With the popularization of Single Component Angular Modules (SCAM), standalone components was the most obvious next step. I'm thrilled this happened so seamlessly.

ps. Am I the only one weirded out by how clear the mic sound is? now I want to know what microphone was used.

[metric]

This is a great feature. Looking forward to when this is production ready

[seabird]

Sample of Demo is not good, If you use : <a More</a></p> This page will reload all scripts, images, including [main.js] . So, I recommend you demo with using [routerLink] to reload only script.

[elavarasur]

NgModules essentially were a skeleton structure which gave angular apps its architecture and making them optional will allow developers to create apps in an unopinionated manner like react.
Angular's inbuilt architecture is the one of the best features and an important reason to be adopted by enterprises and they just undid this. This looks like a step backward than forward.
Can someone please tell me how this feature and this direction is a good thing....?

[surajbande]

exciting feature! Thank you team for your efforts.. appreciate lot! Looks like Angular is becoming pure components based like other frameworks.. looking forward to using it soon in the project..!!

[GoodcitizenCA]

Thanks for the tutorial and English English

[joeyvico]

Beautiful!! This new feature sounds promising and it feels Angular is getting lighter and lighter. Thanks

[scottwong]

How does setting up specs work? Normally we define a testing module with all the imports/declarations.

[Whizyrel]

I see, "I am standing here alone...". Nice entry point 😂

[MelroyvandenBerg]

Thanks for the link to the example code!

[MelroyvandenBerg]

When I use: `ng generate component DogsList --flat --standalone`. I no longer get the CommonModule as imports nor implements OnInit by default in my generated code. is that correct??

[famezof]

I've switched to Enterprise project based on React about a year ago, so I have the competence to compare two ecosystems. Damn, Angular is like a swizz knife has everything you need, has way better documentation and better standards, I kinda miss it. The only flaw is performance in some cases, but I think the Angular team will resolve this issue eventually by switching the compiler to esbuild and by making zone.js and rxjs optional.
It can be faster and lighter without losing its versatility.