Standalone components with Custom Title Strategy in Angular 14
Introduction
Till Angular 13, the smallest possible reusable block of code in an Angular application was NgModule
Then, there came an RFC (RFC #43784) to make NgModules optional. The idea behind it was to reduce the boilerplate code for getting started with an Angular application and to get rid of *.module.ts files. As per the latest release of Angular (version 14), NgModules have been made optional. As of now, it is a “developer preview” feature since the API for making NgModules optional is not stable yet and might be changed in future depending upon the community feedback.
As of version 14, the components have become the smallest possible reusable block of code thanks to the concept of standalone components (also standalone directives and standalone pipes), much like what we have in other front end frameworks like React.js and Vue.js.
Standalone Components
Angular standalone components are the components which can be used without declaring them inside the NgModule decorators and by providing the standalone: true property inside the @Component decorator. It allows you to add the imports directly to the @Component decorator without having to declare it in the @NgModule
Standalone components, under the hood, use virtual module, which is very similar to the pattern of SCAM module (Single Component Angular Module) — Every single Angular component has a dedicated module. It is a one to one relationship.
Setting up an Angular 14 standalone app
Alright, enough theory, let’s code! Let us create a fully standalone Angular application without an *.module.ts or @NgModule()
At the time of writing this article, I have Angular CLI v13.3.7 installed on my system. I will be creating an Angular 13 app and then upgrading it to Angular 14.
Create a new Angular app by ng new <app name>. I am giving it the name of “angular-14-starter”. It would create a boilerplate code with module files and routing files (if you have added routing at the time of generating a new app).
Upgrade your app to Angular 14 by using ng update --next . Your screen should show something like below.
Run the below command to upgrade it to Angular 14:
ng update @angular/cli @angular/core --next
The screen should show something like below.
Now that we have our app upgraded to Angular 14, your package.json file should look something like below:
I have added Angular Material as part of this demo. You can also add it to your project by using ng add @angular/material
The basic structure of a standalone component looks somewhat like below:
The class UserComponent contains a standalone: true property inside the @Component decorator and imports CommonModule by default. The above component can be created by using the below Angular CLI command — ng generate component user --standalone . The UserComponent contains information about the user so let us use the Angular Material Card Module and display the information of the user on a mat-card.
Similarly, create another standalone component (for instance, dashboard) like ng generate component dashboard --standalone
Let us plug-in these components in the route configuration. The app-routing.module.ts should look like below:
In v14, there is a new property loadComponent which can be used to load the component lazily similar to what we previously did for module using the loadChildren property. Also, there is a title property which takes in the name of the page title and it gets changed when the route changes.
Now, let us refactor the app a bit and get rid of all the *.module.ts files.
Delete the app.module.ts file and refactor your app.component.ts file to look like this:
Modify the main.ts file like below:
The main.ts file contains bootstrapApplication() from @angular/platform-browser that takes in AppComponent and bootstraps the standalone Angular application. The routes need to be injected in the providers array by using another built-in method importProvidersFrom from @angular/core
Run your application using npm run start and you should see the Angular standalone components working in action. If you open the Network tab, you would see the application also lazily loads both UserComponent and DashboardComponent
Custom Title Strategy
We can also customise the title of the application routes by extending the TitleStrategy provided by @angular/router . Alternatively, you can also use resolver method to get the title of the page.
I have implemented both of the strategies as shown in the below GitHub gist.
Modify your app-routing.module.ts file to look like this:
And update providers array in main.ts file to look like this:
The UserComponent should get the title as Standalone app — User Info since it is the default title provided in the CustomTitleStrategy when you do not provide the title property in the route configuration.
In the same way, the DashboardComponent gets the title Standalone app — My dashboard since the title gets resolved by the DashboardTitleResolver and then the CustomTitleStrategy kicks in to set the title of the /dashboard route to Standalone app — My dashboard
If you were coding along and got stuck anywhere in the process, below is the public link to the GitHub repo:
Conclusion
And there we have it. I hope you have found this article useful. Thank you for reading. Please feel free to provide your comments, suggestions, and any other feedback that may be helpful.
