Custom Directives in Angular

Directives allow you to extend HTML. This lesson introduces custom directives and how you can create your own.

What is a Directive?

Directives change the appearance or behavior of DOM elements. Angular provides built-in directives like *ngIf and *ngFor.

Types of Directives

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

Creating an Attribute Directive

Create a directive using the Angular CLI:

ng generate directive highlight

ng generate directive highlight

Applying the Directive

Use your directive as an attribute in your template:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Directive Logic

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';
}

@HostListener Decorator

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

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

@Input() in Directives

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

@Input() defaultColor: string;

Summary

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