psudo_code.ts

// Concept

@Directive({
    selector: 'introTip'
})
class IntroTipDirective implements Oninit{
    @Input('introTip') key: string;

    constructor(private hostElement: ElementRef,
                private interService;
                ) {}

onInit() {this.interService.addStep(this.key, this.hostElement.nativeElement)}

}




interface Step {
  label: string;
  intro: string;
  element: HTMLElement;
}


class IntroService {
   readonly steps: Map<string, Step>;


   addStep(key: string, elemnt: HTMLElement) {
       this.steps.get(key).element = elemnt;
   }

   start() {
       introJs.start()
   }

}


// Concept!

import {AfterViewInit} from "@angular/core";
// service
{
    TIP_1: "what to display", element,
    TIP_2: "what to display 2", element,
}

`
 <div></div>
 <button introTip="TIPS_TIP_1">click</button>
 <input introTip= "TIPS_TIP_2" type="text" />
`


class PageComponent implements AfterViewInit, OnDe{

    constructor(private introService) {
    }

    ngAfterViewInit() {
        this.introService.start();
    }

}