How to Create Standalone Components in Angular
Angular has become one of the most popular frameworks to build web applications today.
One of the key features of the framework is its component-based architecture, which allows best practices like modularity and reusability. Each Angular component consists of a template, a TypeScript class and metadata.
In this blog post, we will dive deeper into standalone components, and we will explore the anatomy of an application based on them.
For the demo application, we will create a card-like component which can be used to render blog posts in a web application.
Prerequisites
You'll need to have installed the following tools in your local environment:
* The latest LTS version of Node.js is recommended.
* Either NPM or Yarn as a package manager.
* The Angular CLI tool(Command-line interface for Angular).
Initialize the Project
Let's create a project from scratch using the Angular CLI tool:
`
This command will initialize a base project using some configuration options:
* --routing. It will create a routing module.
* --prefix corp. It defines a prefix to be applied to the selectors for created components(corp in this case). The default value is app.
* --style css. The file extension for the styling files.
* --skip-tests. Disable the generation of testing files for the new project.
If you pay attention to the generated files and directories, you'll see an initial project structure including the main application module and component:
`
Creating Standalone Components
First, let's create the custom button to be used as part of the Card component later. Run the following command on your terminal:
`
It will create the files for the component. The --standalone option will generate the component as _standalone_.
Let's update the button.component.ts file using the content below.
`
Pay attention to this component since it's marked as standalone: true.
Starting with Angular v15: components, directives, and pipes can be marked as standalone by using the flag standalone.
When a class is marked as _standalone_, it does not need to be declared as part of an NgModule. Otherwise, the Angular compiler will report an error.
Also, imports can be used to reference the dependencies.
> The imports property specifies the standalone component's template dependencies — those directives, components, and pipes that can be used within its template. Standalone components can import other standalone components, directives, and pipes as well as existing NgModules.
Next, let's create the following components: card-title, card-content, card-actions and card.
This can be done at once using the next commands.
`
On card-title.component.ts file, update the content as follows:
`
Next, update the card-content.component.ts file:
`
The card-actions.component.ts file should have the content below:
`
Finally, the card.component.ts file should be defined as follows:
`
Using Standalone Components
Once all Standalone components are created, we can use them without the need to define an NgModule.
Let's update the app.component.ts file as follows:
`
Again, this Angular component is set as standalone: true and the imports section specifies the other components created as dependencies. Then, we can update the app.component.html file and use all the standalone components.
`
This may not work yet, since we need to configure the Angular application and get rid of the autogenerated module defined under the app.module.ts file.
Bootstrapping the Application
Angular provides a new API to use a standalone component as the application's root component.
Let's update the main.ts file with the following content:
`
As you can see, we have removed the previous bootstrapModule call and the bootstrapApplication function will render the standalone component as the application's root component. You can find more information about it here.
Live Demo and Source Code
Want to play around with this code? Just open the Stackblitz editor or the preview mode in fullscreen.
Conclusion
We’re now ready to use and configure the Angular components as standalone and provide a simplified way to build Angular applications from scratch. Do not forget that you can mark directives and pipes as standalone: true. If you love Angular as much as we do, you can start building today using one of our starter.dev kits or by looking at their related showcases for more examples....
