angular-component

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

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 for attribute coercion.

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

No, use native control flow blocks instead: @if/@else for conditionals, @for with a track expression for loops, and @switch for multi-branch logic. These replace the legacy structural directives entirely.

Use the model() function, which creates both an input and an output automatically. Parents bind with [(value)] syntax, and the child updates the value with this.value.set(newValue).

Components must pass AXE checks, meet WCAG AA standards, include proper ARIA attributes like role and aria-checked, support keyboard navigation via keydown handlers, and maintain visible focus indicators.