A fully customizable Bootstrap component for creating modal dialogs.
npm install ng-bootstrap-modalTypescript
@NgModule({
imports: [
BrowserModule,
ModalModule.forRoot([ { name: 'popup', component: ConfirmDialogComponent}])
],
declarations: [ AppComponent, ConfirmDialogComponent ],
bootstrap: [ AppComponent ],
providers: [
],
exports: []
})
export class AppModule {
}
`
If you are using routes:
`Typescript
@NgModule({
imports: [
BrowserModule,
RouterModalModule.forRoot([ { name: 'popup', component: ConfirmDialogComponent}]),
RouterModule.forRoot([...])
],
declarations: [ AppComponent, ConfirmDialogComponent ],
bootstrap: [ AppComponent ],
providers: [
],
exports: []
})
export class AppModule {
}
`
$3
Add a modal-outlet directive to the AppComponent template. This is where the modal dialog will be created in.
app.component.html
`html
`
Creating Component Dialogs
dialog.component.html
There are three sections that you can customize - modal-header, modal-body, and modal-footer.
`html
...
...
...
`
For example, you can customize the footer by adding your own buttons:
`html
`
dialog.component.ts
Inject ModalService.
1. Call ok(param) with an optional parameter to accept. This will trigger the Ok event handler.
2. Call cancel() to cancel. This will trigger the Cancel event handler.
Calling either will close the dialog and invoke the event handler.
`Typescript
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:
`Typescript
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:
`Typescript
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:
`Typescript
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.
`Typescript
onOpenAlert() {
this.modalService.open('alert', 'hey there');
}
`
You can access the value from the dialog component by injecting ModalService and calling its getValue() method.
`Typescript
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.
`Typescript
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:
`Typescript
onOpenAlert() {
this.modalService.open('alert')
.subscribe(t => {
alert(t); // alerts 'something else';
});
}
``