Standalone Components

Standalone: standalone: true, imports: [CommonModule, RouterLink] on the component. No NgModule required. New Angular apps bootstrap this way.

You still must import what the template uses. Forget CommonModule → *ngIf unknown. Forget RouterLink → routerLink isn’t a property.

Trap — mixing old NgModule declarations with standalone without importing the standalone component where it’s used.

Diagram

  Parent
    │ [student]
    ▼
  StudentCard
    │ (save)
    ▼
  Parent.onSave

Exam tip

standalone + imports array. Why CommonModule.

Example

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

@Component({
  selector: "app-hello",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = "Angular";
}

Standalone Components — @Component ties a class to a selector + template.

Short notes

DefComponent with standalone: true + imports[].
RuleImport every template dependency.
TrapMissing CommonModule.

Standalone Components

Standalone: standalone: true, imports: [CommonModule, RouterLink] on the component. No NgModule required. New Angular apps bootstrap this way.

You still must import what the template uses. Forget CommonModule → *ngIf unknown. Forget RouterLink → routerLink isn’t a property.

Trap — mixing old NgModule declarations with standalone without importing the standalone component where it’s used.

Diagram

  Parent
    │ [student]
    ▼
  StudentCard
    │ (save)
    ▼
  Parent.onSave

Exam tip

standalone + imports array. Why CommonModule.

Example

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

@Component({
  selector: "app-hello",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = "Angular";
}

Standalone Components — @Component ties a class to a selector + template.

Short notes

DefComponent with standalone: true + imports[].
RuleImport every template dependency.
TrapMissing CommonModule.

Standalone Components

Example

Short notes

Questions

Standalone Components

Example

Short notes

Questions