Standalone Components in Angular

A standalone component is a type of component that doesn’t belong to any specific Angular module.Before Angular version 14, when you created a component, you typically had to include it in the declaration array of a module; otherwise, Angular would throw an error during compilation.Standalone components are independent units that can be instantiated and used anywhere within an Angular application, regardless of the module structure. Standalone components can be useful for creating reusable UI elements or utility functions that are not specific to any module.

In this post, we'll explore standalone components in Angular and how to create them with a detailed example.

Creating a Standalone Component

First, make sure you're using Angular version 14. To create a component on its own, use the --standalone option with the command ng generate component.

ng g c component_name  --standalone

Above command will generate the standalone component.Below is the example of standalone component-

import { Component } from '@angular/core';
import { CommonModule} from '@angular/common';
@Component({
  selector: 'app-example-standalone-component',
  standalone: true, // This property should be true for standalone component
  imports: [CommonModule],
  template: '<h1>Hello, World!</h1>'
})
export class ExampleStandaloneComponent {}

How to Utilize a Standalone Component?

We can use the standalone component in two ways:

1. Within Another Standalone Component

   We can use a standalone component inside another standalone component by adding it to the imports property of the second component, as shown below.

   import { Component } from '@angular/core';
   import {CommonModule} from '@angular/common';
   @Component({
     selector: 'app-other-standalone-component',
     standalone: true,
     imports: [CommonModule],
     template: '<p>Other standalone component</p>'
   })
   export class OtherStandAloneComponent {}
       

   Now you can use OtherStandAloneComponent component on MyStandaloneComponent as below

   import { Component } from '@angular/core';
   import {CommonModule} from '@angular/common';
   import {OtherStandAloneComponent} from 'other-stand-alone/other-stand-alone.component';
   @Component({
     selector: 'app-my-standalone-component',
     standalone: true,
     imports: [OtherStandAloneComponent], //import other standalone component here
     template: '<h1>Hello, World!</h1><app-other-standalone-component></app-other-standalone-component>'
   })
   export class MyStandaloneComponent {}
       

2. Inside a Module

   If you want to use a standalone component within another component that's part of an NgModule, you can simply add it to the imports array, as shown below.

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common'; 
   import { LandingComponent } from './landing.component';
   import {OtherStandAloneComponent} from './other-stand-alone/other-stand-alone.component';
   
   @NgModule({
       imports: [CommonModule,OtherStandAloneComponent], // imports standalone compnent
       declarations: [LandingComponent]
   })
   export class LandingModule { }
       

   In above , I require a OtherStandAloneComponent in AppComponent, and AppComponent is part of an NgModule. Therefore, I added OtherStandAloneComponent to the imports array.

Bootstrap an Angular Standalone Component

Bootstraping your Angular standalone component is simple. In your main.ts file, replace the old code with the updated code highlighted below in red. Don't forget to specify your standalone component in the bootstrapApplication method.

import {enableProdMode} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import {StandAloneComponent} from './stand-alone/stand-alone.component';
import {environment} from './environments/environment'
 if(environment.Production){
  enableProdMode();
}
bootstrapApplication(StandAloneComponent, { //Bootstraping Standalone
providers:[],  
})

Next, on the index.html, replace app-root with your component.

<body>
<!--<app-root></app-root>-->
<app-standalone></app-standalone>
</body>
</html>

Configuring dependency injection

When bootstrapping an application, you might need to set up Angular's dependency injection and provide configuration values or services to be used across the app. You can do this by passing them as providers to the bootstrapApplication function.

bootstrapApplication(StandAloneComponent, {
  providers: [
    {provide: BACKEND_URL, useValue: 'https://example.com/api'},
    // ...
  ]
});

Some existing libraries may depend on NgModules for configuring DI. For instance, Angular’s router utilizes the RouterModule.forRoot() helper to establish routing in an application. You can still use these existing NgModules in bootstrapApplication through the importProvidersFrom utility, as demonstrated below.

bootstrapApplication(StandAloneComponent, {
  providers: [
    {provide: BACKEND_URL, useValue: 'https://example.com/api'},
    importProvidersFrom(RouterModule.forRoot(APP_ROUTES))
  ]
});

Lazy Loading a Standalone Component

Any route can implement lazy loading for its routed standalone component by utilizing the loadComponent() function with the import statement.

export const ROUTES: Route[] = [
  {path: 'admin', loadComponent: () => import('./stand-alone/stand-alone.component').then(m => m.StandAloneComponent) },
  // ...
];

Conclusion

Standalone components in Angular provide a way to create reusable UI elements or utility functions that are not tied to any specific module. By creating standalone components, you can promote reusability and maintainability in your Angular applications. In this post, we've learned how to create a standalone component and use it within an Angular application. Experiment with standalone components in your Angular projects to see how they can enhance your development workflow.

Find out more about Standalone Component

Happy coding!! 😊