Ngx Bootstrap Dialog

Simple and customizable dialogs for Angular built on top of NG Bootstrap.

Demo

Please check the demos:

• default config!
• custom config!

Getting started

Install dependency:

The only dependency is @ng-bootstrap/ng-bootstrap. Basically you can install it with:

ng add @ng-bootstrap/ng-bootstrap

For more informations, please check the offical documentation.

Install:

npm install ngx-bootstrap-dialog --save

Import module:

//...
import { NgxBootstrapDialogModule } from 'ngx-bootstrap-dialog';
//....

@NgModule({
  declarations: [AppComponent],
  imports: [
    //...
    NgxBootstrapDialogModule
    //...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Inject/Use NgxBootstrapDialogService:

//...
import { NgxBootstrapDialogService } from 'ngx-bootstrap-dialog';
//....

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private dialog: NgxBootstrapDialogService) {}

  openDialogAlert() {
    this.dialog.alert({
      title: 'Title',
      message: 'Lorem ipsum!',
    });
  }

  openDialogConfirm() {
    this.dialog.confirm({
      title: 'Title',
      message: 'Lorem ipsum?',
    });
  }
}

Method Alert:

The method opens a new alert dialog with the supplied options and return a promise. These options will be merged with the default options (see the values in table below);

  alert(options: NgxBootstrapDialogAlertOptions): Promise<any>

The promise is resolved by clicking the confirm button and rejected when the dialog is dismissed.

    this.dialog.alert({
      title: 'Title',
      message: 'Lorem ipsum!',
    })
    .then(() => console.log('Confimed!'))
    .catch(() => console.log('Dismissed!'));

Alert options and default values (NgxBootstrapDialogOptions):

Option	Type	Default value	Description
title	string	''	Alert title
message	string	''	Message title
confirmButtonLabel	string	'Confirm'	Button confirm label
confirmButtonClass	string	'btn btn-primary'	Button confirm css class
showConfirmButton	boolean	true	Show confirm button
cancelButtonLabel	string	'Cancel'	Button cancel label
cancelButtonClass	string	'btn btn-secondary'	Button cancel css class
showCancelButton	boolean	false	Show cancel button
showCloseButton	boolean	false	Show close button
ngbModalOptions	NgbModalOptions	null	Options available for NgbModal.open() method see NgbModalOptions

Method Confirm:

The method opens a new confirm dialog with the supplied options and return a promise. These options will be merged with the default options (see the values in table below);

  confirm(options: NgxBootstrapDialogAlertOptions): Promise<any>

The promise is resolved by clicking the confirm button and rejected by clicking the cancel button or when the dialog is dismissed.

    this.dialog.confirm({
      title: 'Title',
      message: 'Lorem ipsum!',
    })
    .then(() => console.log('Confimed!'))
    .catch(() => console.log('Canceled or dismissed!'));

Confirm options and default values (NgxBootstrapDialogOptions):

Option	Type	Default value	Description
title	string	''	Alert title
message	string	''	Message title
confirmButtonLabel	string	'Confirm'	Button confirm label
confirmButtonClass	string	'btn btn-primary'	Button confirm css class
showConfirmButton	boolean	true	Show confirm button
cancelButtonLabel	string	'Cancel'	Button cancel label
cancelButtonClass	string	'btn btn-secondary'	Button cancel css class
showCancelButton	boolean	true	Show cancel button
showCloseButton	boolean	false	Show close button
ngbModalOptions	NgbModalOptions	null	Options available for NgbModal.open() method see NgbModalOptions

Global config

The global config can be adjusted by providing a value for NGX_BOOTSTRAP_ALERT_DEFAULT_OPTIONS and NGX_BOOTSTRAP_CONFIRM_DEFAULT_OPTIONS in your application's root module. These options will be merged with the respective default options.

//...
import { NgxBootstrapDialogModule } from 'ngx-bootstrap-dialog';
import {
  NGX_BOOTSTRAP_ALERT_DEFAULT_OPTIONS,
  NGX_BOOTSTRAP_CONFIRM_DEFAULT_OPTIONS,
} from 'ngx-bootstrap-dialog';

//....

@NgModule({
  declarations: [AppComponent],
  imports: [
    //...
    NgxBootstrapDialogModule
    //...
  ],
  providers: [
    {
      provide: NGX_BOOTSTRAP_ALERT_DEFAULT_OPTIONS,
      useValue: { confirmButtonClass: 'btn btn-danger' },
    },
    {
      provide: NGX_BOOTSTRAP_CONFIRM_DEFAULT_OPTIONS,
      useValue: { confirmButtonText: 'CONFIRM' },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}