Custom Directives in Angular

Custom Directives in Angular — a practical guide to Angular custom directives with clear examples you can reuse in real projects.

Angular Tutorial Series (29/119). Prefer one article? Read the complete Angular tutorial.

Short description

Use directives for reusable DOM behavior without a full component.

Directive sketch

@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  @HostBinding('style.backgroundColor') bg = '#ecfdf5';
}