ng-bootstrap-modal
A fully customizable Bootstrap component for creating modal dialogs.
Demo: https://angular-patterns.github.io/ng-bootstrap-modal/
Pre-requisites
- Bootstrap 3
- Angular5+
Installation
npm install
ng-bootstrap-modal --save
Setup
Importing the Module
If you are not using routes:
@NgModule({ imports: [ BrowserModule, ModalModule.forRoot([ { name: 'popup', component: ConfirmDialogComponent}]) ], declarations: [ AppComponent, ConfirmDialogComponent ], bootstrap: [ AppComponent ], providers: [ ], exports: []})export class AppModule {}
If you are using routes:
@NgModule({ imports: [ BrowserModule, RouterModalModule.forRoot([ { name: 'popup', component: ConfirmDialogComponent}]), RouterModule.forRoot([...]) ], declarations: [ AppComponent, ConfirmDialogComponent ], bootstrap: [ AppComponent ], providers: [ ], exports: []})export class AppModule {}
Adding the ModalOutlet
Add a modal-outlet
directive to the AppComponent
template. This is where the modal dialog will be created in.
app.component.html
.
Creating Component Dialogs
dialog.component.html
There are three sections that you can customize - modal-header, modal-body, and modal-footer.
... ... ...
For example, you can customize the footer by adding your own buttons:
Submit Cancel
dialog.component.ts
Inject ModalService
.
- Call
ok(param)
with an optional parameter to accept. This will trigger the Ok event handler. - Call
cancel()
to cancel. This will trigger the Cancel event handler.
Calling either will close the dialog and invoke the event handler.
import { Component, OnInit } from '@angular/core';import { ModalService } from 'ng-bootstrap-modal'; @Component({ selector: 'nx-dialog', templateUrl: 'dialog.component.html'}) export class DialogComponent implements OnInit { constructor(private modalService:ModalService) { } ngOnInit() { } submit() { this.modalService.ok(); } cancel() { this.modalService.cancel(); }}
Registering Component Dialogs
You can register a component dialog with either a RouterModalModule
or a ModalModule
.
Both modules have a static forRoot
method where you can register component dialogs by name.
For example:
ModalDialog.forRoot([ { name: 'test', component: DialogComponent }, { name: 'alert', component: AlertDialogComponent }, { name: 'confirm', component: ConfirmDialogComponent }])
You can then trigger the dialog by injecting ModalService
and calling its open
method:
constructor(private modalService: ModalService) { } onOpenTest() { this.modalService.open('test');}onOpenAlert() { this.modalService.open('alert');}onOpenConfirm() { this.modalService.open('confirm');}
Handling Ok and Cancel events
You can subscribe to the Ok and Cancel events from the return value from the open
method.
For example:
onOpenAlert() { this.modalService.open('alert') .subscribe(t => { this.message = 'Confirmed successfully!'; this.info = t; }, () => { this.message = 'Cancelled'; }); }
Passing Data to your Dialog Component
The second parameter to the open
method accepts a parameter that you can pass to your dialog component.
onOpenAlert() { this.modalService.open('alert', 'hey there'); }
You can access the value from the dialog component by injecting ModalService
and calling its getValue()
method.
import { Component, OnInit } from '@angular/core';import { ModalService } from 'ng-bootstrap-modal'; @Component({ selector: 'nx-dialog', templateUrl: 'dialog.component.html'}) export class DialogComponent implements OnInit { param:string; constructor(private modalService:ModalService) { this.param = this.modalService.getValue(); } ngOnInit() { } submit() { this.modalService.ok(); } cancel() { this.modalService.cancel(); }}
Passing Data from the Dialog back to the Ok Handler
The Ok method from the ModalService
accepts an optional parameter that can be passed back to the Ok handler.
import { Component, OnInit } from '@angular/core';import { ModalService } from 'ng-bootstrap-modal'; @Component({ selector: 'nx-dialog', templateUrl: 'dialog.component.html'}) export class DialogComponent implements OnInit { param:string; constructor(private modalService:ModalService) { this.param = this.modalService.getValue(); } ngOnInit() { } submit() { this.param = 'something else'; this.modalService.ok(this.param); } cancel() { this.modalService.cancel(); }}
The calling component can handle the returned value:
onOpenAlert() { this.modalService.open('alert') .subscribe(t => { alert(t); // alerts 'something else'; }); }