import { Injectable , Injector , ComponentRef } from '@angular/core' ; import { Overlay , OverlayConfig , OverlayRef , GlobalPositionStrategy } from '@angular/cdk/overlay' ; import { ComponentPortal } from '@angular/cdk/portal' ; @ Injectable ( { providedIn : 'root' } ) @ Injectable ( ) export class PopupService { overlay : Overlay = null ; overlayRef : OverlayRef = null ; currentServiceName = null ; serviceArray : any = [ ] ; constructor ( public _overlay ) { this . overlay = this . _overlay ; } showPopup ( component , childInjector ? , hasBackdrop ? , positionStrategy = this . overlay . position ( ) . global ( ) . centerVertically ( ) . centerHorizontally ( ) ) { let overlayConfig = new OverlayConfig ( ) ; overlayConfig . hasBackdrop = hasBackdrop ; overlayConfig . positionStrategy = positionStrategy ; this . overlayRef = this . overlay . create ( overlayConfig ) ; this . overlayRef . backdropClick ( ) . subscribe ( ( ) => { this . hidePopup ( ) ; } ) ; return this . overlayRef . attach ( new ComponentPortal ( component , undefined , childInjector ) ) ; } hidePopup ( ) { if ( this . overlayRef ) { this . overlayRef . dispose ( ) ; } } }