Angular Custom Directives

In this post we will review Angular Directives and how to create custom directives.

Angular Directives

Angular Directives are parameters that can be passed to HTML elements that can modify its behaviour or look.

To create a new directive, run the following command on the root of your Angular project:

# ng g directive <directive-path>

ng g directive directives/customdir

You can see that a directory directives with two files inside it customdir.directive.ts and customdir.directive.spec.ts has been generated. If you open the first file you should see something like this:

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

@Directive({
  selector: '[customdir]'
})
export class CustomdirDirective {

  constructor() { }

}

Then you can use it in your HTML on your components:

<custom-component customdir [someValue]="myVariable">
  Some content.
</custom-component>

Host Binding

Host Binding allows us to modify DOM properties of the element on which the directive is being applied. For that, we use the Host Binding Decorator. In the following example, we will see how to apply a CSS class to the element that is using the customdir directive.

customdir.directive.ts

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

@Directive({
  selector: '[customdir]'
})
export class CustomdirDirective {

  constructor() { }

  @HostBinding('className')
  get cssClasses() {
    return "mycssclass";
  }

}

In this case, inside @HostBinding we are specifiyng which DOM Property we want to bind our cssClasses function to. The return value, which in this example is mycssclass, will be applied to the className DOM property of the element that uses our directive. Of course we can use HostBinding to any other DOM property.

Here is another way of doing the same operation:

@HostBinding('class.mycssclass')
get cssClasses() {
  return true;
}

Another example but with styles:

@HostBinding('style.border')
get cssClasses() {
  return "1px dotted blue";
}

We could also pass a value to the directive, take the following example:

<custom-component [customdir]="true" [someValue]="myVariable">
  Some content.
</custom-component>

customdir.directive.ts

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

@Directive({
  selector: '[customdir]'
})
export class CustomdirDirective {

  @Input('customdir')
  isClassActivated = false;

  constructor() { }

  @HostBinding('class.mycssclass')
  get cssClasses() {
    return isClassActivated;
  }

}

We can also set the attribute of the element instead of its DOM property using the attr notation:

@HostBinding('attr.disabled')
get disabled() {
  return "true";
}

Host Listener

Host Listener allows us to subscribe our directive to an event of the element that the directive is being applied, to perform operations.

customdir.directive.ts

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

@Directive({
  selector: '[customdir]'
})
export class CustomdirDirective {

  @Input('customdir')
  isClassActivated = false;

  constructor() { }

  @HostBinding('class.mycssclass')
  get cssClasses() {
    return isClassActivated;
  }

  @HostListener('mouseover')
  mouseOver() {
    this.isClassActivated = true;
  }
  
  @HostListener('mouseleave')
  mouseLeave() {
    this.isClassActivated = false;
  }
}

We can also query the native DOM event if we happen to need it:

@HostListener('mouseover', ['$event'])
mouseOver($event) {
  this.isClassActivated = true;
}

$event is a special variable that contains the native DOM event.

We can also use custom events on our directive:

customdir.directive.ts

import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';

@Directive({
  selector: '[customdir]'
})
export class CustomdirDirective {

  @Input('customdir')
  isClassActivated = false;

  @Output()
  toggleMyClass = new EventEmitter();

  constructor() { }

  @HostBinding('class.mycssclass')
  get cssClasses() {
    return isClassActivated;
  }

  @HostListener('mouseover')
  mouseOver() {
    this.isClassActivated = true;
    this.toggleMyClass.emit(this.isClassActivated);
  }
  
  @HostListener('mouseleave')
  mouseLeave() {
    this.isClassActivated = false;
    this.toggleMyClass.emit(this.isClassActivated);
  }
}

<custom-component (toggleMyClass)="onToggle($event)" [customdir]="true" [someValue]="myVariable">
  Some content.
</custom-component>

Then on the component.ts file of the component where our custom component is instantiated, for example if our custom-component above is instantiated in app.component.html, the function we are called should be added to app.component.ts:

onToggle(isClassActivated:boolean) {
  console.log(isClassActivated);
}

Export As syntax

Export As allows us to make functions inside our custom directives exposed to use from outside. We will add a function toggle() and add exportAs:

customdir.directive.ts

import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';

@Directive({
  selector: '[customdir]',
  exportAs: 'md'
})
export class CustomdirDirective {

  @Input('customdir')
  isClassActivated = false;

  @Output()
  toggleMyClass = new EventEmitter();

  constructor() { }

  @HostBinding('class.mycssclass')
  get cssClasses() {
    return isClassActivated;
  }

  @HostListener('mouseover')
  mouseOver() {
    this.isClassActivated = true;
    this.toggleMyClass.emit(this.isClassActivated);
  }
  
  @HostListener('mouseleave')
  mouseLeave() {
    this.isClassActivated = false;
    this.toggleMyClass.emit(this.isClassActivated);
  }

  toggle() {
    this.isClassActivated = !this.isClassActivated;
    this.toggleMyClass.emit(this.isClassActivated);
  }
}

We exported it as md, then we can use it by using a reference template, then using that reference to call the function toggle():

<custom-component (toggleMyClass)="onToggle($event)" #directiveref="md" [customdir]="true" [someValue]="myVariable">
  Some content.
</custom-component>

<button (click)="directiveref.toggle()">Toggle class</button>

Of course we also could access programmatically to the customdir directive using ViewChild:

@ViewChild(CustomdirDirective)
mydirective: CustomdirDirective;

ngAfterViewInit () {
  console.log(this.mydirective);
}

We can also query the directive through the component instead of querying the directive directly:

@ViewChild(CustomComponent, {read: CustomdirDirective})
mydirective: CustomdirDirective;