Angular Dropdown

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

@Component({
  selector: "app-root",
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button
        class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 bg-blueGray-700 active:bg-blueGray-800"
        type="button"
        (click)="toggleDropdown($event)"
        #btnDropdownRef
      >
        White Dropdown
      </button>
    </div>
  </div>
</div>
<div class="z-50" style="min-width: 12rem" #popoverDropdownRef>
  <div
    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
    style="min-width: 12rem"
    [ngClass]="dropdownPopoverShow ? 'block' : 'hidden'"
  >
    <a
      href="#pablo"
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-blueGray-700"
    >
      Action
    </a>
    <a
      href="#pablo"
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-blueGray-700"
    >
      Another action
    </a>
    <a
      href="#pablo"
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-blueGray-700"
    >
      Something else here
    </a>
    <div
      class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"
    ></div>
    <a
      href="#pablo"
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-blueGray-700"
    >
      Seprated link
    </a>
  </div>
</div>`,
})
export class AppComponent implements AfterViewInit {
  dropdownPopoverShow = false;
  @ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
  @ViewChild("popoverDropdownRef", { static: false })
  popoverDropdownRef: ElementRef;
  ngAfterViewInit() {
    createPopper(
      this.btnDropdownRef.nativeElement,
      this.popoverDropdownRef.nativeElement,
      {
        placement: "bottom-start",
      }
    );
  }
  toggleDropdown(event) {
    event.preventDefault();
    if (this.dropdownPopoverShow) {
      this.dropdownPopoverShow = false;
    } else {
      this.dropdownPopoverShow = true;
    }
  }
}