Standalone Components in Angular v21

Angular v21 enables standalone components, reducing module boilerplate and making app structure simpler.

#Generating a Standalone Component

ng generate component my-widget --standalone

#Example Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-my-widget',
  standalone: true,
  imports: [CommonModule],
  template: `<h2>Hello from standalone component!</h2>`,
})
export class MyWidgetComponent {}

#Using Standalone Components

@Component({
  selector: 'app-root',
  template: `<app-my-widget></app-my-widget>`,
  standalone: true,
  imports: [MyWidgetComponent],
})
export class AppComponent {}

#Benefits

• No need for NgModules
• Easier lazy-loading and routing
• Simplifies dependency management

#Conclusion

Standalone components in Angular v21 streamline app structure, reduce boilerplate, and improve maintainability.