Use Tippy.js in Angular

Question

I have a directive with the following code

import { Directive, Input, OnInit, ElementRef, SimpleChanges, OnChanges } from \'@angular/core\';
import tippy fr         


        

Answer 1

You can also use the lifecyle hook ngAfterViewInit then you don't need the setTimeout.

public ngAfterViewInit() {
    this.loadTippy();
}

Answer 2

I'm not sure what they were trying to accomplish in the linked repo you have included. To get tippy.js to work though, you should be able to change the directive to the following:

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

@Directive({
  /* tslint:disable-next-line */
  selector: '[tippy]'
})
export class TippyDirective implements OnInit {

  @Input('tippyOptions') public tippyOptions: Object;

  constructor(private el: ElementRef) {
    this.el = el;
  }

  public ngOnInit() {
    tippy(this.el.nativeElement, this.tippyOptions || {}, true);
  }
}

Working example repo