Adding a bootstrap popover with an Angular directive

Question

I'm trying to add a bootstrap to an element using an Angular directive:

import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core';

@Directive( {
    selector: '[myPopup]'
} )

export class MyPopupDirective implements OnInit
{
    constructor(
        private element: ElementRef,
        private renderer: Renderer,
    ) { }

    ngOnInit()
    {
        this.renderer.setElementAttribute( this.element.nativeElement, "triggers", "mouseenter:mouseleave" );
        this.renderer.setElementAttribute( this.element.nativeElement, "ngbPopover", "Hello World!!" );
        this.renderer.setElementAttribute( this.element.nativeElement, "popoverTitle", "Testing" );
    }
}

I'm planning to use @Input parameters so I can customize the popup so I assumed using implements OnInit would be the correct path. Here is my usage:

<a myPopup href="...">Hover for popup</a>

I can tell that my directive is working because the attributes are added to the HTML, but the popup is not working. I added the popup attributes inline without using the directive and everything worked. I noticed that the ng-reflect-* attributes were not present when I used my directive, but were when I added the attributes inline. I tried moving the code in ngOnInit into the constructor, but it still didn't work.