angular-component

Define a component with the @Component decorator without setting standalone: true, since components are standalone by default in v20. Use signal inputs via input(), outputs via output(), and set ChangeDetectionStrategy.OnPush.

Replace @Input() with the input() function, using input.required<T>() for mandatory values and input(defaultValue) for optional ones. Add transform options like booleanAttribute or numberAttribute to handle attribute string coercion.

Use the host object in the @Component decorator instead of @HostBinding and @HostListener decorators. It supports static attributes, class and style bindings, ARIA attributes, and event listeners in one declarative place.

Modern Angular favors native control flow blocks: @if, @for with track expressions, and @switch. These replace *ngIf, *ngFor, and *ngSwitch and work without importing CommonModule directives.

Use the model() function, which creates both an input and an output for two-way binding with [(value)] syntax. Call value.set() or value.update() inside the component to emit changes to the parent.

Interactive components must pass AXE checks, meet WCAG AA standards, include proper ARIA attributes like role and aria-checked, support keyboard navigation for Enter and Space keys, and maintain visible focus indicators.