Dialog overview

NbDialogService

The NbDialogService helps to open dialogs.

A new dialog is opened by calling the open method with a component to be loaded and an optional configuration. open method will return NbDialogRef that can be used for the further manipulations.

Installation

Import NbDialogModule.forRoot() to your app module.

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

If you are using it in a lazy loaded module than you have to install it with NbDialogModule.forChild():

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

Usage

const dialogRef = this.dialogService.open(MyDialogComponent, { ... });

NbDialogRef gives capability access reference to the rendered dialog component, destroy dialog and some other options described below.

Also, you can inject NbDialogRef in dialog component.

this.dialogService.open(MyDialogComponent, { ... });

// my-dialog.component.ts
constructor(protected dialogRef: NbDialogRef) {
}

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

Instead of component you can create dialog from TemplateRef:

The dialog may return result through NbDialogRef. Calling component can receive this result with onClose stream of NbDialogRef.

Configuration

As we mentioned above, open method of the NbDialogService may receive optional configuration options. Also, you can provide global dialogs configuration through NbDialogModule.forRoot({ ... }).

This config may contain the following:

context - both, template and component may receive data through config.context property. For components, this data will be assigned through inputs. For templates, you can access it inside template as $implicit.

this.dialogService.open(template, { context: 'pass data in template' });

<ng-template let-some-additional-data>
  {{ some-additional-data }}
<ng-template/>

hasBackdrop - determines is service have to render backdrop under the dialog. Default is true.

closeOnBackdropClick - close dialog on backdrop click if true. Default is true.

closeOnEsc - close dialog on escape button on the keyboard. Default is true.

hasScroll - Disables scroll on content under dialog if true and does nothing otherwise. Default is false. Please, open dialogs in the separate window and try to scroll.

autoFocus - Focuses dialog automatically after open if true. It's useful to prevent misclicks on trigger elements and opening multiple dialogs. Default is true.

As you can see, if you open dialog with auto focus dialog will focus first focusable element or just blur previously focused automatically. Otherwise, without auto focus, the focus will stay on the previously focused element. Please, open dialogs in the separate window and try to click on the button without focus and then hit space any times. Multiple same dialogs will be opened.

NbDialogRef

The NbDialogRef helps to manipulate dialog after it was created. The dialog can be dismissed by using close method of the dialogRef. You can access rendered component as content property of the dialogRef. onBackdropClick streams click events on the backdrop of the dialog.

NbDialogConfig

Describes all available options that may be passed to the NbDialogService.