Why standalone components matter in Angular

Introduction

Standalone components let you build Angular apps faster and simpler by removing the need for extra setup. They make your code easier to understand and reuse.

When starting a new Angular project and you want less setup work.

When you want to share components easily between different parts of your app.

When you want to write cleaner code without managing NgModules.

When you want faster app startup and smaller bundle sizes.

When you want to learn Angular with simpler examples.

Syntax

Angular

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

@Component({
  selector: 'app-example',
  standalone: true,
  template: `<p>Hello from standalone component!</p>`
})
export class ExampleComponent {}

The key part is standalone: true inside the @Component decorator.

Standalone components do not need to be declared in any NgModule.

Examples

A basic standalone component with a simple template.

Angular

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

@Component({
  selector: 'app-simple',
  standalone: true,
  template: `<h1>Simple Standalone</h1>`
})
export class SimpleComponent {}

Standalone components can import other modules like CommonModule directly.

Angular

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

@Component({
  selector: 'app-with-common',
  standalone: true,
  imports: [CommonModule],
  template: `<p *ngIf=\"true\">Using CommonModule features</p>`
})
export class WithCommonComponent {}

Sample Program

This component shows a simple greeting message. It is standalone, so you can use it directly without adding it to any NgModule.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h2>Welcome to standalone components!</h2>`
})
export class GreetingComponent {}

Important Notes

Standalone components simplify Angular apps by removing NgModule dependencies.

You can still use features like directives and pipes by importing their modules inside the standalone component.

Standalone components improve code reuse and app startup speed.

Summary

Standalone components remove the need for NgModules, making Angular simpler.

They help you write cleaner, more reusable code.

Use standalone: true in the component decorator to create one.