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>