cdkPortal: popup

popup.component.html

<ng-template cdkPortal>
  <div class="popup">
    <div class="arrow"></div>
    <ng-content></ng-content>
  </div>
</ng-template>

popup.component.scss

@use 'variables' as *;

.popup {
  width: 280px;
  height: 224px;
  background-color: white;
  transform: translateY(100%);
  border: 1px solid $graphical-divider-gray-color;
  border-radius: 4px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);

  .arrow {
    width: 100px;
    height: 25px;
    position: absolute;
    bottom: 100%;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 20px;
      background: white;
      transform: translateY(100%) rotate(45deg);
      left: 20px;
      box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 15%);
    }
  }
}

popup.component.ts

class PopupComponent {
  @Input()
  public offsetX = -16;

  @Input()
  public offsetY = 18;

  @ViewChild(CdkPortal)
  private templatePortal: CdkPortal;

  private overlayRef: OverlayRef | undefined;
  
  @ViewChild(CdkPortal)
  private templatePortal: CdkPortal;
  
  public showPopup(e: MouseEvent): void {
    e.stopPropagation();

    const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.hostElement)
      .withPositions([
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'bottom',
          offsetX: this.offsetX,
          offsetY: this.offsetY,
        },
      ]);

    const overlayConfig = new OverlayConfig({
      // hasBackdrop: config.hasBackdrop,
      // backdropClass: config.backdropClass,
      // panelClass: config.panelClass,
      positionStrategy,
    });

    this.overlayRef = this.overlay.create(overlayConfig);

    this.overlayRef.attach(this.templatePortal);
  }
 
}