Custom directives menambahkan behavior ke elemen DOM.

Attribute Directive

@Directive({
  selector: "[appHighlight]",
  standalone: true,
})
export class HighlightDirective {
  @Input() appHighlight = "yellow"

  constructor(private el: ElementRef) {}

  @HostListener("mouseenter") onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = ""
  }
}

// <p appHighlight="lightblue">Hover saya</p>

Structural Directive

Structural directive mengubah struktur DOM (menambah/hapus elemen). Prefix * menandakan structural directive.