איך לבנות Directive באנגולר

import { ContentChild, Directive, ElementRef, HostListener, Input, Output, Renderer2, TemplateRef, ViewContainerRef, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @Output() isWorking: EventEmitter<boolean> = new EventEmitter<boolean>();
  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef,
    private viewContainerRef: ViewContainerRef) { }
  @ContentChild("tooltip") private tooltipTemplateRef: TemplateRef<Object>;
  @HostListener('mouseenter') onMouseEnter(): void {
    this.showTooltip();
  }
  @HostListener('focus') onFocus(): void {
    this.showTooltip();
  }
  @HostListener('mouseleave') onMouseLeave(): void {
    this.hideTooltip();
  }
  @HostListener('blur') onBlur(): void {
    this.hideTooltip();
  }

  showTooltip() {
    const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
    view.rootNodes.forEach(node =>
      this.renderer.appendChild(this.elementRef.nativeElement, node));
    this.isWorking.emit(true);
  }
  hideTooltip() {
    if (this.viewContainerRef) {
      this.viewContainerRef.clear();
    }
    this.isWorking.emit(false);
  }
}

 

[appTooltip] {
    position: relative;
  }
  .tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 1px rgba(0,0,0,.6);
  }

<div appTooltip (isWorking)="onTooltip($event)" tabindex="0">
    <p [ngClass]="{'toolTipOn':tooltipShow}">first-component works!</p>
    <ng-template #tooltip>
        <div class="tooltip">
            <span>HI I AM TOOLTIP</span>
        </div>
    </ng-template>
</div>

.toolTipOn {
    background-color: aquamarine;
    font-weight: bold;
}

export class FirstComponentComponent implements OnInit {
  public tooltipShow: boolean;
  constructor() { }
  ngOnInit(): void {
  }
  onTooltip(event) {
    this.tooltipShow = event;
  }
}