Window overview

NbWindowService

The NbWindowService can be used to open windows.

Installation

Import NbWindowModule to your app module.

@NgModule({
  imports: [
    // ...
    NbWindowModule.forRoot(config),
  ],
})
export class AppModule { }

If you are using it in a lazy loaded module than you have to install NbWindowModule.forChild:

@NgModule({
  imports: [
    // ...
    NbWindowModule.forChild(config),
  ],
})
export class LazyLoadedModule { }

Usage

A new window can be opened by calling the open method with a component or template to be loaded and an optional configuration. open method will return NbWindowRef that can be used for the further manipulations.

const windowRef = this.windowService.open(MyComponent, { ... });

NbWindowRef gives you ability manipulate opened window. Also, you can inject NbWindowRef inside provided component which rendered in window.

this.windowService.open(MyWindowComponent, { ... });

// my.component.ts
constructor(protected windowRef: NbWindowRef) {
}

minimize() {
  this.windowRef.minimize();
}

close() {
  this.windowRef.close();
}

Instead of component you can create window from TemplateRef. As usual you can access context provided via config via let- variables. Also you can get reference to the NbWindowRef in context's windowRef property.

Configuration

As mentioned above, open method of the NbWindowService may receive optional configuration options. Also, you can modify default windows configuration through NbWindowModule.forRoot({ ... }). You can read about all available options on API tab.

You can configure which buttons are available in a window via the buttons property of the window config.

NbWindowRef

The NbWindowRef helps to manipulate window after it was created. The window can be dismissed by using close method of the windowRef. You can access rendered component as componentRef property of the windowRef. Property contentInstance contains the instance of the component opened in the window.

NbWindowConfig

Window configuration options.