Angular 22 · Components and templates

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>();
}

Official Angular 22 documentation

More components and templates commands

Pass data in and out
Show content conditionally
Loop over items
Handle an event
Bind a property
Toggle a CSS class

All components and templates commands · Angular 22 cheatsheet