Angular Custom Directive

Angular Component Directive

Angular Custom Directive

So far we have learned about different types of directives, now we will write our own directive. We can write our own custom directives to update the behavior of an existing element.

We are basically going to create a attribute directive in this example. In order to create the custom directive, we first need to run our hello world project. So make sure your project is running.

Now let’s create a separate folder for our new example on attribute directive. Invoke the below command to do so.

ng g d directives/component --spec false

Angular Component Directive


Writing Directive

The “@Directive” attribute or decorator can be used to create a new directive in angular. So let’s get started.


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

@Directive({
  selector: '[txtFormatter]'
})
export class ComponentDirective implements OnInit {

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
    this.elementRef.nativeElement.style.fontSize = '18px';
    this.elementRef.nativeElement.style.color = 'white';
    this.elementRef.nativeElement.style.width = '240px';
    this.elementRef.nativeElement.style.padding = '10px';
  }

}

As you can see in above example, we have created a new attribute directive with the name “txtFormatter” which will modify the text properties.

But there are some components which needs to be clear before we can understand it properly.

  • selector : To create an attribute directive, we use special type of selector like “[selectorName]”.
  • ElementRef : It is used to access native DOM elements and can modify it.

Using the Directive

If you have created the directive by using angular CLI tool then you don’t need to register your component directive in you module. It is already registered there. So let’s use the newly created attribute directive as below.

src/app/app.component.html





<p txtFormatter>
    This is the text formatter attribute directive example.
</p>




Using the Host Listener

Now the best part of the directive is that you can listen to the events as well. You can listen all event by simply using “@HostListener” annotation or decorator. Let’s modify our directive.


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

@Directive({
  selector: '[txtFormatter]'
})
export class ComponentDirective implements OnInit {

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
    this.elementRef.nativeElement.style.fontSize = '18px';
    this.elementRef.nativeElement.style.color = 'white';
    this.elementRef.nativeElement.style.width = '240px';
    this.elementRef.nativeElement.style.padding = '10px';
  }

  @HostListener('mouseenter') mouseEnterEvent() {
    this.elementRef.nativeElement.style.backgroundColor = 'green';
  }

  @HostListener('mouseleave') mouseLeaveEvent() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }

}


Loot at the above directive, the background color will be changed on mouse enter and leave. Basically we are listening mouse enter and leave event.

The “@HostListener” takes event name as string argument and we can bind any method with it which will be executed during that event.


Angular Component Directive Example

 



Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *