Angular 8 Session 17 - Custom Attribute Directive With Event Handler

Custom Attribute Directive With Event Handler

* A Custom Attribute Directives can listen into an event and act accordingly which extends custom directive features.

Implementing Event Handler

* Continuing with last example we have discussed (Part-16), text will be highlighted and bold based on an event fires with help of HostListener from angular/core library.

* HostListener is a decorator, which defines a DOM element with event to run when the event occurs. 

             For more details visit: https://angular.io/api/core/HostListener 

* @HostListener() takes 2 arguments:.

1. eventName

          2. args?

app.component.html

<div>

  <div appElementHighlighter>This tutorial elaborates custom directive</div>

  <br />

  <p appElementHighlighter>This is SKMDotNet Tutorial.</p>

</div>

app.component.ts

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

@Directive({

  selector: '[appElementHighlighter]'

})

export class ElementHighlighterDirective {

  constructor(private er: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {

    this.takeEffect('yellow');

  };

  @HostListener('mouseleave') onMouseLeave() {

    this.takeEffect(null);

  };

  private takeEffect(colorType: string) {

    this.er.nativeElement.style.backgroundColor = colorType;

    this.er.nativeElement.style.fontWeight = 'bold';

  }

}

Angular 8 Session 16 - Build A Custom Attribute Directive In Angular

Build A Custom Attribute Directive

* Attribute Directives listens & modifies a behavior of html elements, properties, attributes & components.

Building A Custom Directive

* An attribute Directives minimally requires a controller class which is decorated with ‘@Directive’, which specifies a selector to be used with element to change its behavior.

* In this tutorial, we will be creating a directive which will highlight and bold the text on applied HTML element.

* Run the cmd ng generate directive elementhighlighter or ng g d elementhighlighter to create a directive.

Apply The Directive To Element

  * To apply the directive, we have created to an element use the selector.

app.component.ts

<div>

  <div appElementHighlighter>This tutorial elaborates custom directive</div>

</div>

elementhighlighter.directive.ts

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

@Directive({

  selector: '[appElementHighlighter]'

})

export class ElementHighlighterDirective {

  constructor(er: ElementRef) {

    er.nativeElement.style.backgroundColor = 'yellow';

    er.nativeElement.style.fontWeight = 'bold';

  }

}

* Imports Directive namespace to avail @Directive decorator which makes a controller to behave as directive.

* Also we imports ElementRef from ‘@angular/core’ library which inject the DOM element to host on which the directive going to be applied.

* ElementRef grants direct access to DOM element using its nativeElement property.

app.component.ts

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

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {ElementHighlighterDirective} from './Directives/Attribute/elementhighlighter.directive';

@NgModule({

  declarations: [

    AppComponent,

    ElementHighlighterDirective

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }