overlay.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'open-overlay',
  template: `
    <div (click)="onOpen($event)" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
      <ng-content select="[header]"> </ng-content>
    </div>

    <ng-template
      cdkConnectedOverlay
      [cdkConnectedOverlayOrigin]="trigger"
      [cdkConnectedOverlayOpen]="isOpen"
      (overlayOutsideClick)="onOutsideClick()"
    >
      <div
        class="mat-elevation-z1"
        style="background: white; padding-right: 0px; padding: 20px 15px"
      >
        <ng-content select="[body]"></ng-content>
      </div>
    </ng-template>

  `,
})
export class SelectOverlayComponent {
  isOpen = false;

  onOpen(event: Event) {
    event.preventDefault();
    this.isOpen = !this.isOpen;
  }

  onOutsideClick() {
    this.isOpen = false;
  }
}