Angular Directives

Create custom directives for reusable DOM manipulation and behavior in Angular v20+.

Attribute Directives

Modify the appearance or behavior of an element:

import { Directive, input, effect, inject, ElementRef } from "@angular/core";

@Directive({
  selector: "[appHighlight]",
})
export class Highlight {
  private el = inject(ElementRef<HTMLElement>);

  // Input with alias matching selector
  color = input("yellow", { alias: "appHighlight" });