What is a standalone component in Angular?

A standalone component manages its own dependencies. Instead of being declared in an NgModule, it lists the components, directives and pipes it uses in its own imports array.

import { Component } from '@angular/core'
import { DatePipe } from '@angular/common'
import { RouterLink } from '@angular/router'

@Component({
  selector: 'app-greeting',
  imports: [DatePipe, RouterLink],
  template: `
    <p>Today is {{ today | date }}</p>
    <a routerLink="/">Home</a>
  `,
})
export class Greeting {
  today = new Date()
}

The app starts with bootstrapApplication(App, appConfig) and no root module. Routing, HTTP and other services are set up through provide... functions in the config.

Benefits:

• Less boilerplate and no module to maintain.
• Each component shows exactly what it uses.
• Easier lazy loading and better tree-shaking.

Since Angular 19, components, directives and pipes are standalone by default. In Angular 14 to 18 you had to write standalone: true, and you will see that in older code.

Write standalone components, and import only what the template uses.