Angular pop over component that appears on top of a button on user click.
For this component to properly work, you will need to install popper.js
into your project. Please run the following:npm i -E [email protected]
import { Component, ViewChild, ElementRef } from '@angular/core';
import Popper from "popper.js";
@Component({
selector: 'app-root',
// templateUrl: './app.component.html',
template: `<div class="flex flex-wrap">
<div class="w-full text-center">
<button #btnRef (click)="togglePopover()" class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1" type="button" style="transition:all .15s ease">
top pink
</button>
</div>
</div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
popoverShow = false;
@ViewChild('btnRef',{ static: false }) btnRef:ElementRef;
popper = document.createElement("div");
ngOnInit() {
this.popper.innerHTML = `<div class="bg-pink-600 border-0 mb-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
<div>
<div class="bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-gray-200 uppercase rounded-t-lg">
pink popover title
</div>
<div class="text-white p-3">
And here's some amazing content. It's very engaging. Right?
</div>
</div>
</div>`;
}
togglePopover(){
if(this.popoverShow){
this.popoverShow = false;
this.destroyPopper();
} else {
this.popoverShow = true;
this.createPoppper();
}
}
destroyPopper(){
this.popper.parentNode.removeChild(this.popper);
}
createPoppper(){
new Popper(this.btnRef.nativeElement, this.popper, {
placement: "top"
});
this.btnRef.nativeElement.parentNode.insertBefore(this.popper, this.btnRef.nativeElement.nextSibling);
}
}