ng2-window-view
v0.1.2
Published
[![NPM](https://nodei.co/npm/ng2-window-view.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ng2-window-view/) [![NPM](https://nodei.co/npm-dl/ng2-window-view.png?months=3&height=3)](https://nodei.co/npm/ng2-window-view/)
Downloads
9
Maintainers
Readme
ng2-window-view
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 bootstrappanel
class. Anything wrap by this will present as content of a window. Provide some common config.WindowViewOutletComponent
- An outlet component similar torouter-outlet
. RequireWindowViewService
, any window push fromWindowViewService
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 whatWindowViewLayerService
do. If aWindowViewContainerComponent
enablefloating
and disableshowBackground
, it will be push intoWindowViewLayerService
. All windows inWindowViewLayerService
can changez-index
by clicking component.
Components
ConfirmDialog
Usage
$ npm install --save ng2-window-view
Quick Start
- 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);
}
}