A few of core class for implement window more convenient, and provide collection of common type of modal, dialog components.
-
WindowViewContainerComponent- A window component using bootstrappanelclass. Anything wrap by this will present as content of a window. Provide some common config. -
WindowViewOutletComponent- An outlet component similar torouter-outlet. RequireWindowViewService, any windo 8C34 w push fromWindowViewServicewill be placed after outlet component. -
WindowViewService- For management of windows. It treat all windows as a stack. You can push or pop window from it. -
WindowViewLayerService- Some case, you need multi-floating window feature, that is whatWindowViewLayerServicedo. If aWindowViewContainerComponentenablefloatingand disableshowBackground, it will be push intoWindowViewLayerService. All windows inWindowViewLayerServicecan changez-indexby clicking component.
ConfirmDialog
$ npm install --save ng2-window-view
- Import module.
import { NgModule } from '@angular/core';
import { WindowViewModule } from 'ng2-window-view';
import { MyWindowComponent } from './my-window-component';
@NgModule({
imports: [
WindowViewModule
],
entryComponents: [
// window component have to provide a component factory,
// by adding component to `entryComponents`.
MyWindowComponent
]
})
export class AppModule {}- Create your window component.
import { Component } from '@angular/core';
import { WindowViewContainerComponent } from 'ng2-window-view';
@Component({
selector: 'my-window',
template: `
<window-view-container [heading]="windowTitle">
It's a window!!
</window-view-container>`
})
export class MyWindowComponent {
windowTitle: string = 'Title here!';
}- Push window component.
import { Component, ComponentRef } from '@angular/core';
import { WindowViewOutletComponent, WindowViewService } from 'ng2-window-view';
import { MyWindowComponent } from './my-window';
@Component({
selector: 'app-root',
template: `
<button (click)="openWindow()">Open Window</button>
<window-view-outlet></window-view-outlet>
`,
providers: [WindowViewService]
})
export class AppComponent {
constructor(private windowView: WindowViewService) {}
openWindow() {
this.windowView.pushWindow(MyWindowComponent);
}
}