[Angular] Export directive functionalities by using 'exportAs'

Directive ables to change component behaives and lookings. Directive can also export some APIs which enable behaivor changes control by outside directive iteslf.

 

For example, we have an tooltip:

It is a directive:

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

@Directive({
  selector: '[tooltip]',
  exportAs: 'tooltip'
})
export class TooltipDirective implements OnInit {
  tooltipElement = document.createElement('div');
  @Input()
  set tooltip(value) {
    this.tooltipElement.innerText = value;
  }

  hide() {
    this.tooltipElement.classList.remove('tooltip--active');
  }

  show() {
    this.tooltipElement.classList.add('tooltip--active');
  }

  constructor(
    private element: ElementRef
  ) {}

  ngOnInit() {
    this.tooltipElement.className = 'tooltip';
    this.element.nativeElement.appendChild(this.tooltipElement);
    this.element.nativeElement.classList.add('tooltip-container');
  }
}

This tooltip should be hidden by default.

 

We want to toggle show/hide by mouse over the '(?)' span:

So just export the directive:

@Directive({
  selector: '[tooltip]',
  exportAs: 'tooltip'
})

 

The html:

    <div>
      <label>
        Credit Card Number
        <input 
          name="credit-card" 
          type="text"
          placeholder="Enter your 16-digit card number"
          credit-card>
      </label>
      <label
        tooltip="3 digial only"
        #myTooltip="tooltip"
        >
        Enter your security code 
        <span
          (mouseover)="myTooltip.show()"
          (mouseout)="myTooltip.hide()">
          (?)
        </span>
        <input type="text">
      </label>
    </div>

 

And html get use template ref to get the directive:

#myTooltip="tooltip"

Then we can control it in other place:

        <span
          (mouseover)="myTooltip.show()"
          (mouseout)="myTooltip.hide()">
          (?)
        </span>