confirmation modal

confirmation.modal.ref.ts

import { OverlayRef } from '@angular/cdk/overlay';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';

export class ConfirmationModalOverlayRef {
 public events = new BehaviorSubject<any>(null);
 constructor(private overlayRef: OverlayRef) { }
 public close(): void {
    this.overlayRef.dispose();
 }
}

confirmation.modal.service.ts

overlayRef.backdropClick().subscribe((_) => {
  if (this.customConfig.hasBackdropClick) {
    dialogRef.close();
  }
});

my-page.component.ts

export class MyPageComponent implements OnInit, OnDestroy {
public confirmationRef: ConfirmationModalOverlayRef;
constructor(
   private confirmationService: ConfirmationModalService
 ) {}
private openConfirmationModal() {
   this.confirmationRef = this.confirmationService.open({
     data: {
       itemId: this.selectedOption.id,
       action: 'delete this section'
     }
   });

   this.confirmationRef.events.pipe(
     filter((event) => !!event),
     filter((event) => {
       return event.type === 'confirm' || event.type === 'close';
     }),
     take(1) // notice I take only one event per confirmation dialog
   ).subscribe((events) => {
     switch (events.type) {
       case 'confirm':
         // do logic that required explicit confirmation from the user
       break;
       case 'close':
         this.confirmationRef.close();
       break;
     }
   });
 }