ng2-window-view

Documentation & Example Here!

Concept

A few of core class for implement window more convenient, and provide collection of common type of modal, dialog components.

Core Classes

• WindowViewContainerComponent - A window component using bootstrap panel class. Anything wrap by this will present as content of a window. Provide some common config.

• WindowViewOutletComponent - An outlet component similar to router-outlet. Require WindowViewService, any window push from WindowViewService will 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 what WindowViewLayerService do. If a WindowViewContainerComponent enable floating and disable showBackground, it will be push into WindowViewLayerService. All windows in WindowViewLayerService can change z-index by clicking component.

Components

• ConfirmDialog

Usage

$ npm install --save ng2-window-view

Quick Start

1. Import module.

1import { NgModule } from '@angular/core';
2import { WindowViewModule } from 'ng2-window-view';
3import { MyWindowComponent } from './my-window-component';
4
5@NgModule({
6  imports: [
7    WindowViewModule
8  ],
9  entryComponents: [
10    // window component have to provide a component factory,
11    // by adding component to `entryComponents`.
12    MyWindowComponent
13  ]
14})
15export class AppModule {}

2. Create your window component.

1import { Component } from '@angular/core';
2import { WindowViewContainerComponent } from 'ng2-window-view';
3
4@Component({
5  selector: 'my-window',
6  template: `
7  <window-view-container [heading]="windowTitle">
8    It's a window!!
9  </window-view-container>`
10})
11export class MyWindowComponent {
12  windowTitle: string = 'Title here!';
13}

3. Push window component.

1import { Component, ComponentRef } from '@angular/core';
2import { WindowViewOutletComponent, WindowViewService } from 'ng2-window-view';
3import { MyWindowComponent } from './my-window';
4
5@Component({
6  selector: 'app-root',
7  template: `
8  <button (click)="openWindow()">Open Window</button>
9  <window-view-outlet></window-view-outlet>
10  `,
11  providers: [WindowViewService]
12})
13export class AppComponent {
14  constructor(private windowView: WindowViewService) {}
15  
16  openWindow() {
17    this.windowView.pushWindow(MyWindowComponent);
18  }
19}