Why should you care?

Less boilerplate, clearer dependencies per component — better for AngularVerse feature folders.

See it live — copy this example

Run examples in an Angular CLI project (ng serve). Prefer standalone components and TypeScript strict mode.

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

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule],
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = 'AngularVerse';
}

What happened?

• standalone: true opts into the modern mode.
• imports lists other standalone pieces (and NgModules if needed).

Practice next

1. Generate: ng g c hello --standalone.
2. Render HelloComponent from the root route.
3. Add a second binding.
4. Use @if / @for if your version supports control flow.
5. Move template to an HTML file.

Remember

Standalone = self-contained component. Import what the template needs. Prefer this for new apps.

First screen

Show a welcome header.

Outcome: A standalone component renders on localhost.