For a while the Angular community had been asking for standalone components i.e components that are independent and do not need a module(NgModule). With Angular version 14 that capability was added. There are those who still want NgModules and don’t see the need for standalone components and because of this the feature was made optional so as to accommodate everyone.
In this article we’ll look at how to create and integrate standalone components in our Angular application. There are different scenarios that could happen and they are
- Only 1 component in the application which is a standalone component.
- Adding a standalone component to another standalone component.
- Adding a module to a stand alone component.
- Only 1 component in the application which is a standalone component.
Lets say we have a component called AppComponent that has one property called title and displays that title in the template.
Lets generate the project. We’ll call the project single-standalone
`ng new single-standalone`
`cd single-standalone`
`ng serve`
Lets delete app.module.ts. We don’t need it since its a standalone component
In the app.component.ts file lets add the property ‘standalone’ in the @Component decorator and set it to true
You should get an error like below
The above error is because main.ts file is still trying to load the module we deleted.
Lets make a few changes to main.ts file
Delete the AppModule import statement and the platformBrowserDynamic import.
Add a new import for bootstrapApplication and the app.component.ts file
Everything should compile properly now. Your page should look as below
And that’s its. It wasn’t hard was it?
Now onto the second one
2. Adding a standalone component to another standalone component.
Since we already have our initial standalone component i.e AppComponent. We’ll create another standalone component and import it to our AppCompoment. Our AppComponent will remain as the root component.
For our new component, lets call it SecondStandAloneComponent
`ng g c SecondStandAlone –skip-import`
`ng serve`
we use the –skip-import option to avoid importing to any module
Next we’ll edit the SecondStandAloneComponent and add the standalone property and set it to true. We’ll also add a title property to display to the template.
Now lets import it to our root component so we can use it.
Next we’ll add it to our root template.
Your web page should look as shown below
3.Adding a module to a stand alone component.
Using the same project now lets add a new module and component. Lets call our module MyTestModule
Next we’ll create a TestComponent and add it to the MyTestModule
It should already have been added to MyTestModule since we added it while generating the component
Lets add a title property to TestComponent and render it in its corresponding template
Now lets import it in our AppComponent. Since TestComponent is part of MyTestModule, we will import MyTestModule.
Now for the template
Now lets check in the browser
Nice!
The Angular team also released standalone directives as well as pipes in Angular v14. They also showed how to inject services in the stand alone components. You can have a look at the official docs