Standalone Components
Standalone Components means independent component which are not dependent on NgModules or which are not part of any NgModules. Previously whenever we create any of the components , we used to import its dependency inside the declaration section of the NgModule. But from Angular 14 and onwards we can use the components without need of NgModule. In angular 14 standalone components are introduced on trail basis but in Angular 15 its stable now.
The main purpose of Standalone components, directives, and pipes is to streamline the authoring experience by reducing the need for NgModules. It is a very simplified way to build an Angular application. Existing application also optionally and incrementally adapt these components without any breaking changes. With component you can create the standalone directives and standalone pipes as well.
How to Create Standalone Component?
To create the standalone component we need to use the –standalone flag in the ng generate component command
ng generate component c standalone-demo --standalone OR ng g c standalone-demo --standalone
Once component will be created by above command your component.ts file looks like this.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector:'app-standalone-demo',
standalone:true,
imports: [CommonModule],
templateUrl:'./standalone-demo.component.html',
styleUrls: ['./standalone-demo.component.scss']
})
export class StandaloneDemoComponent {
}
You can see now the component is marked as standalone:true. It means Angular classes marked as standalone:true do not need to be declared in an NgModule. And imports property is used to import the another standalone dependency. It can be component, pipes or directives.
Bootstrapping an Application without NgModule
We can bootstrap angular application without using NgModule. And it can be done by using standalone component. This can be done by using the bootstrapApplication API. You just need to replace the few things.
In main.ts initially you will see –
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
You need to replace above code by using below code.
import { bootstrapApplication } from '@angular/platform-browser';
import { StandaloneDemoComponent } from './app/standalone-demo/standalone-demo.component';
bootstrapApplication(StandaloneDemoComponent);
Similarly you need to replace the selector name in index.html. Initially it will be <app-root></app-root> or any selector. You just need to replace it by using your standalone component which you want to bootstrap. We are replacing with our component which we have create. It will look like this.
<!doctype html> <html lang="en"> <head> <metacharset="utf-8"> <title>Angular15Project</title> <basehref="/"> <metaname="viewport"content="width=device-width, initial-scale=1"> <linkrel="icon"type="image/x-icon"href="favicon.ico"> </head> <body> <!-- <app-root></app-root> --> // Commented out the previous app <app-standalone-demo></app-standalone-demo> // Added the new standalone component </body> </html>
After doing these minor changes in both the files you will be able to bootstrap your standalone component.
How to configure dependencies using bootstrapApplication
If you want to use any of the dependencies like services or anything else while you are using the bootstrapApplication , you can inject dependencies like below.
import { bootstrapApplication } from '@angular/platform-browser';
import { StandaloneDemoComponent } from './app/standalone-demo/standalone-demo.component';
bootstrapApplication(StandaloneDemoComponent, {
providers: []
});
You can provide services name inside the providers property.
Routing Using Standalone Component
We can add the routing also using standalone component. For that we just need to do below changes.
app.routing.module.ts
Define your routes in routing file.
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
export const APP_ROUTES: Routes = [
{
path:'',
pathMatch:'full',
redirectTo:'home'
},
{
path:'home',
component:HomeComponent
}
];
Add the routingModule dependency in main.ts
import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { APP_ROUTES } from './app/app-routing.module';
import { StandaloneDemoComponent } from './app/standalone-demo/standalone-demo.component';
bootstrapApplication(StandaloneDemoComponent, {
providers: [
importProvidersFrom(RouterModule.forRoot(APP_ROUTES))
]
});
Also in standalone component need to import the routing module.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@Component({
selector:'app-standalone-demo',
standalone:true,
imports: [CommonModule, RouterModule],
templateUrl:'./standalone-demo.component.html',
styleUrls: ['./standalone-demo.component.scss']
})
export class StandaloneDemoComponent {
}
Then in stand alone component html file need to add the router outlet
<p>standalone-demo works!</p> <router-outlet></router-outlet>
You just need to create your another component as in our case we have created the homeComponent.
And once you will runt the application. Output will be below.
So this is all about the standalone components in agular.
Visit More:
