Angular right popover

Angular pop over component that appears to the right of a button on user click.


For this component to properly work, you will need to install @popperjs/core into your project. Please run the following:
npm i -E @popperjs/[email protected]

import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { createPopper } from "@popperjs/core";

  selector: "app-root",
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button #btnDropdownRef (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">
      right pink
<div class="z-50" #popoverDropdownRef>
  <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 class="bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
      pink popover title
      <div class="text-white p-3">
        And here's some amazing content. It's very engaging. Right?
export class AppComponent implements AfterViewInit {
  dropdownPopoverShow = false;
  @ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
  @ViewChild("popoverDropdownRef", { static: false })
  popoverDropdownRef: ElementRef;
  ngAfterViewInit() {
        placement: "right",
  toggleDropdown(event) {
    if (this.dropdownPopoverShow) {
      this.dropdownPopoverShow = false;
    } else {
      this.dropdownPopoverShow = true;