Standalone Components in Angular (Modern Angular)

Modern Angular supports standalone components, which means you can build apps without NgModules for most cases.

What is a standalone component?

A standalone component is a component that can be used directly without being declared inside a module.

Example: Standalone component

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    <h2>Welcome!</h2>
    <p>This is a standalone component.</p>
  `,
})
export class GreetingComponent {}

Why it’s better for many teams

• Fewer files and less “module wiring”
• Easier to reuse components
• Cleaner routing setup (especially for lazy loading)

Importing dependencies (important)

Standalone components use imports:

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

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p *ngIf="isOnline">User is online</p>
  `,
})
export class UserComponent {
  isOnline = true;
}

Next: Learn templates and interpolation (show data on screen).