Dynamically mount angular 2 directive

Viewed 3545

Context

I have a simple directive that add some attributes to a given HTML element based on received attributes.

<button class="btn btn-blue x-large" [myDirective]="{ some_json_data: true }">
    Unfold
</button>

The myDirective directive just does some logic in the ngOnInit hook and decorates the ElementRef native element (in this case the button) adding attributes, nothing complicated.

ngOnInit(): void {
  const el: Element = this.element.nativeElement;
  this.decorate(el, this.myDirective);
}

Problem

Based on a given logic (in myDirective decoration) I want to add a tooltip (which is another directive) to the element referenced by ElementRef at myDirective.

How do I mount a directive manually and how do I add it to an element (ViewContainerRef)?

2 Answers
Related