Angular 22 cheatsheet

Angular 22: Components and templates

10 common Angular 22 tasks.

Write a standalone component

A component declares its own imports, with no NgModule.

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

@Component({
  selector: 'app-user-card',
  template: `<h2>{{ name() }}</h2>`,
})
export class UserCardComponent {
  name = input.required<string>();
}

Pass data in and out

Receive a value with input() and notify the parent with output().

name = input.required<string>();
selected = output<string>();

select() {
  this.selected.emit(this.name());
}

Show content conditionally

Use the built-in @if block instead of *ngIf.

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Please sign in.</p>
}

Loop over items

Use @for. The track expression is required and helps Angular reuse DOM elements.

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items.</li>
}

Handle an event

Call a method when the user clicks.

<button (click)="save()">Save</button>

Bind a property

Set an element property from a component value.

<button [disabled]="!form.valid">Submit</button>

Toggle a CSS class

Add a class when a condition is true.

<li [class.active]="isActive">Item</li>

Bind a form field in both directions

Keep a signal in sync with an input. Needs FormsModule.

<input [(ngModel)]="name">

Format values with pipes

Format dates, currency and text in a template.

{{ price | currency }}
{{ created | date: 'mediumDate' }}
{{ name | uppercase }}

Load part of a template lazily

Load a heavy component only when it scrolls into view.

@defer (on viewport) {
  <app-chart />
} @placeholder {
  <p>Chart will load here.</p>
}