Custom Directives

• Component Directives
• Attribute Directives - change appearance or behavior
• Structural Directives - change layout (like *ngIf)

Create a directive using the Angular CLI:

ng generate directive highlight

ng generate directive highlight

Use your directive as an attribute in your template:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Directives contain logic that changes DOM elements. For example, you can set background color dynamically.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Use @HostListener to respond to events on elements with your directive:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() lets you pass data into directives from templates:

@Input() defaultColor: string;

You learned how to create and use custom directives to enhance your Angular apps. Well done!