angular-component

Define a component with the @Component decorator without setting standalone: true, since components are standalone by default in Angular v20+. Use ChangeDetectionStrategy.OnPush and declare dependencies in the imports array.

Replace @Input() with the input() function, using input.required<T>() for mandatory values and input(defaultValue) for optional ones. Access values by calling the signal, and use computed() for derived state instead of getters.

Use the host object in the @Component decorator metadata instead of @HostBinding and @HostListener decorators. It supports class bindings, style bindings, attribute bindings, and event listeners in one declarative location.

Angular supports them, but modern code should use native control flow blocks: @if, @for with track expressions, and @switch. These offer better type checking, performance, and require no CommonModule imports.

Use the model() function instead of input() to create a two-way bindable signal. Parents bind with [(value)] syntax, and the child updates the value by calling this.value.set(newValue), which automatically emits the change.

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.