mz-modal-window

Установка

npm i mz-modal-window --save

Подключение к модулю

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // import our module
    MzModalWindowModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Добавление в шаблон

    <app-modal-window>
        <router-outlet></router-outlet>
        <right-big-panel></right-big-panel>
    </app-modal-window>

Inject в компонент

export class SomeComponent {
  constructor(
        private mzModalWindowService: MzModalWindowService,
  ) {
  
  }
  
  showPanel () {
      this.mzModalWindowService.open(
          AnyComponentForPanel,
          {
              // add hide panel
              hidePanel: this.hidePanel.bind(this),
              // add any @Input data to component
              roleId: -1,
              roleName: '',
              image: '',
              entities: JSON.parse(JSON.stringify(this.emptyRole.entities))
          },
          //TODO later delete, set diference of create and edit
          'id1', // this.panelId
      );
  }
  
  /*
  * hide panel
  * */
  hidePanel () {
      //TODO later delete, set diference of create and edit
      this.mzModalWindowService.close('id1'); // this.panelId
  }
}