Nebular - Window Angular UI Component

NbWindowService

The NbWindowService can be used to open windows.

1234567891011121314151617

import { Component } from '@angular/core';
import { NbWindowService } from '@nebular/theme';
import { FormComponent } from './components/form.component';

@Component({
  template: `<button (click)="openWindow()" nbButton>Open window</button>`,
  styleUrls: [ './window.scss' ],
})
export class WindowShowcaseComponent {

  constructor(private windowService: NbWindowService) {}

  openWindow() {
    this.windowService.open(FormComponent, { title: `Window` });
  }
}

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.

12345678910111213141516171819202122232425262728

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NbWindowService } from '@nebular/theme';

@Component({
  template: `
    <button (click)="openWindow()" nbButton>Open window</button>

    <ng-template #contentTemplate let-data>
      <p>Here is the text provided via config: "{{ data.text }}"</p>
    </ng-template>
  `,
  styleUrls: [ './window.scss' ],
})
export class TemplateWindowComponent {

  // TODO static must be false as of Angular 9.0.0
  @ViewChild('contentTemplate') contentTemplate: TemplateRef<any>;

  constructor(private windowService: NbWindowService) {}

  openWindow() {
    this.windowService.open(
      this.contentTemplate,
      { title: 'Window content from template', context: { text: 'some text to pass into template' } },
    );
  }
}

You could pass the optional window return value to the NbWindowRef.close method. The passed value would be emitted to the NbWindowRef.onClose listeners.

123456789101112131415161718192021222324252627282930313233

/*
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

import { Component } from '@angular/core';
import { NbWindowService } from '@nebular/theme';
import { VisitorsFormComponent } from './components/visitors-form.component';

@Component({
  template: `
    <button nbButton status="primary" (click)="openWindow()">Open window</button>
    <br />
    <h3 class="h5">Window visitors:</h3>
    <ul>
      <li *ngFor="let visitor of visitors">{{ visitor }}</li>
    </ul>
  `,
  styleUrls: ['./window.scss'],
})
export class WindowResultComponent {
  visitors: string[] = [];

  constructor(private windowService: NbWindowService) {}

  openWindow() {
    const windowRef = this.windowService.open(VisitorsFormComponent, { title: `Window` });

    windowRef.onClose.subscribe((visitor) => this.visitors.push(visitor));
  }
}

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.

123456789101112131415161718192021222324252627282930313233343536373839

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NbWindowService } from '@nebular/theme';

@Component({
  template: `
    <button (click)="openWindowWithBackdrop()" nbButton>Open window with backdrop</button>
    <button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button>

    <ng-template #disabledEsc>
      Disabled close on escape click.
    </ng-template>
    <ng-template #escClose>
      Click escape to close.
    </ng-template>
  `,
  styleUrls: [ './window.scss' ],
})
export class WindowsBackdropComponent {

  @ViewChild('escClose', { read: TemplateRef }) escCloseTemplate: TemplateRef<HTMLElement>;
  @ViewChild('disabledEsc', { read: TemplateRef }) disabledEscTemplate: TemplateRef<HTMLElement>;

  constructor(private windowService: NbWindowService) {}

  openWindowWithBackdrop() {
    this.windowService.open(
      this.escCloseTemplate,
      { title: 'Window with backdrop', hasBackdrop: true },
    );
  }

  openWindowWithoutBackdrop() {
    this.windowService.open(
      this.disabledEscTemplate,
      { title: 'Window without backdrop', hasBackdrop: false, closeOnEsc: false },
    );
  }
}

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

123456789101112131415161718192021222324252627282930

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NbWindowControlButtonsConfig, NbWindowService } from '@nebular/theme';

import { FormComponent } from './components/form.component';

@Component({
  templateUrl: 'window-controls.component.html',
  styleUrls: ['./window.scss', './window-controls.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WindowControlsComponent {
  minimize = true;
  maximize = true;
  fullScreen = true;
  close = true;

  constructor(private windowService: NbWindowService) {}

  openWindow() {
    const buttonsConfig: NbWindowControlButtonsConfig = {
      minimize: this.minimize,
      maximize: this.maximize,
      fullScreen: this.fullScreen,
      close: this.close,
    };

    this.windowService.open(FormComponent, { title: `Window`, buttons: buttonsConfig });
  }
}

123456789101112

<nb-card>
  <nb-card-body>
    <p class="subtitle config-title">Buttons config:</p>
    <nb-checkbox [(checked)]="minimize">Minimize</nb-checkbox>
    <nb-checkbox [(checked)]="maximize">Maximize</nb-checkbox>
    <nb-checkbox [(checked)]="fullScreen">Full Screen</nb-checkbox>
    <nb-checkbox [(checked)]="close">Close</nb-checkbox>

    <button (click)="openWindow()" nbButton class="open-window">Open window</button>
  </nb-card-body>
</nb-card>

12345678910111213

.config-title {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

nb-checkbox {
  display: block;
}

.open-window {
  margin-top: 1rem;
}

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.