Standalone Components

No NgModule needed

A standalone component declares its own dependencies via the imports array instead of being registered in an NgModule. It's the default since Angular 17.

Importing what you need

Import directives, pipes, or other components directly into the component that uses them.

import { Component } from '@angular/core';
import { UserBadgeComponent } from './user-badge.component';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [UserBadgeComponent],
  template: `
    @for (u of users; track u) {
      <app-user-badge [name]="u" />
    }
  `,
})
export class UserListComponent {
  users = ['Ada', 'Bo', 'Cy'];
}

Generate with the CLI

The CLI scaffolds a standalone component with its template, styles, and a spec file.

ng generate component user-card
# short form:
ng g c user-card

Quick check: What replaces NgModule registration for a standalone component's dependencies?

• The `providers` array
• The `imports` array
• A separate `@NgModule` file