Angular generic overlay menu abstract class

overlay.menu.ts

import { TransactionListComponent } from './web3-transaction-list/web3-transaction-list.component';
import { Directive, ElementRef, HostListener } from '@angular/core';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { Portal } from '@angular/cdk/portal';
import { Store } from '@ngrx/store';
import { TransactionStateService } from '../services/transaction-state.service';

export abstract class OverlayMenu {
  constructor(
    private elementRef: ElementRef,
    private overlay: Overlay
  ) {}

  launchPanel(overlayPortal: Portal) {
    const overlayConfig: OverlayConfig = new OverlayConfig({
      hasBackdrop: true,
      backdropClass: 'cdk-overlay-transparent-backgorund'
    });
    overlayConfig.positionStrategy = this.overlay.position().connectedTo(
      this.elementRef,
      {
        originX: 'start',
        originY: 'bottom'
      },
      {
        overlayX: 'end',
        overlayY: 'top'
      }
    );
    overlayConfig.scrollStrategy = this.overlay.scrollStrategies.reposition();

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

    overlayRef.attach(overlayPortal);

    overlayRef.backdropClick().subscribe(() => overlayRef.dispose());
  }
}