import { Component , ComponentFactoryResolver , ElementRef , OnDestroy , ReflectiveInjector , Type , ViewChild , ViewContainerRef , ComponentRef , } from '@angular/core' ; import { SimpleModalComponent } from './simple-modal.component' ; /**
 * The modal backdrop wrapping wrapper to the modal
 */ @ Component ( { selector : 'simple-modal-wrapper' , template : `
    <div #wrapper [ngClass]="modalClasses" [ngStyle]="{ display: 'block' }" role="dialog">
      <ng-template #viewContainer></ng-template>
    </div>
  ` , } ) export class SimpleModalWrapperComponent implements OnDestroy { /**
     * Target viewContainer to insert modal content component
     */ @ ViewChild ( 'viewContainer' , { read : ViewContainerRef , static : true } ) viewContainer ; /**
     * Link wrapper DOM element
     */ @ ViewChild ( 'wrapper' , { read : ElementRef , static : true } ) wrapper : ElementRef ; /**
     * Wrapper modal and fade classes
     */ modalClasses = 'modal fade-anim' ; type { SimpleModalComponent } content : SimpleModalComponent < any , any > ; /**
     * Click outside callback
     */ clickOutsideCallback : ( event : MouseEvent ) => void ; param { ComponentFactoryResolver } resolver constructor ( private resolver ) { } param { Type < SimpleModalComponent > } component return { SimpleModalComponent } addComponent < T , T1 > ( component ) { const factory = this . resolver . resolveComponentFactory ( component ) ; const injector = ReflectiveInjector . fromResolvedProviders ( [ ] , this . viewContainer . injector ) ; const componentRef = factory . create ( injector ) ; this . viewContainer . insert ( componentRef . hostView ) ; this . content = < SimpleModalComponent < T , T1 > > componentRef . instance ; this . content . wrapper = this . wrapper ; return { ref : componentRef , component : this . content } ; } param callback onClickOutsideModalContent ( callback ) { const containerEl = this . wrapper . nativeElement ; this . clickOutsideCallback = ( event ) => { if ( event . target === containerEl ) { callback ( ) ; } } ; containerEl . addEventListener ( 'click' , this . clickOutsideCallback , false ) ; } ngOnDestroy ( ) { if ( this . clickOutsideCallback ) { const containerEl = this . wrapper . nativeElement ; containerEl . removeEventListener ( 'click' , this . clickOutsideCallback , false ) ; this . clickOutsideCallback = null ; } } }