[Angular Fundamental] Build Angular Directives

[reboottime]

Overview

This article discusses Angular directives, covering:

• What is it
• How to build it

References

• Proacademy, Understanding Angular Directives
• Angular Docs, Understanding Angular Directives
• Directive Composition API

[reboottime]

What is Angular Directive

Usage and classifications

Directive is an instruction to the DOM, we use directive to

• manipulate DOM
• change behavior
• Add/Remove DOM elements

With angular directives, we can encapsulate reusable behaviors— directives can apply attributes, CSS classes, and event listeners to an element.

Angular Directive Types

• Component directive: is the angular component, it is a directive with a template
• Attribute directives: manipulate DOM attributes. It is used to change the appearance of a DOME element
  • built in directives: ngClass and ngStyle
• structure directives: change the DOM layout, adding/removing an element from page, its pattern

structural directives are applied they generally are prefixed by an asterisk, *, such as *ngIf

[reboottime]

How to build Angular directives

Attribute directive

A step by step guide on building a highlight directive.

Angular supports generate directive using cli, bellow is the command to generate a directvi

sh ng generate directive highlight

• Step 1: Define the highlight directive

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string = 'yellow';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

• Step 2: Import the directive to AppModule

After importing the directive at the AppModule, you can utilize it everywhere inside of the app

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective // Add the directive here
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

• Step 3:Apply a directive somewhere

<div [appHighlight]="'cyan'">
  Hover over me to highlight in cyan.
</div>
<div [appHighlight]="'pink'">
  Hover over me to highlight in pink.
</div>

[reboottime]

How to build Angular directives

Structure directive

[reboottime]

References

• ProAcdemy, understanding angular directives
• Angular Doc, Understanding Angular, Directives
• Directive composition API