31st
Jan
Jan

Angular 5 Modal dialog example
- Admin
- 31st Jan, 2023
Angular 4, Angular 5, Angular 6 modal dialog popup, delete confirm box example
Step 1: install ngx-modal-dialog
npm install --save ngx-modal-dialog
Step2: Including ngx-model module
Include the ngx-modal module in your application at any place. I recommend adding it forRoot initialization in your main app module. So open your app.module.ts and add the following code in it.
import { BrowserModule } from '@angular/platform-browser'; import { ModalDialogModule } from 'ngx-modal-dialog'; @NgModule({ imports: [ BrowserModule, ModalDialogModule.forRoot() ], bootstrap: [AppComponent] })
Step3: Generate a new component named MyModalComponent by running below command on CLI
ng generate component MyModal --module app
Step 4. Add the following code to your my-modal.component.ts file
import { IModalDialog, IModalDialogOptions,IModalDialogButton } from 'ngx-modal-dialog'; import { Component, ComponentRef } from '@angular/core'; @Component({ selector: 'app-my-modal', templateUrl: './my-modal.component.html', styleUrls: ['./my-modal.component.scss'] }) export class MyModalComponent implements IModalDialog { actionButtons: IModalDialogButton[]; constructor() { this.actionButtons = [ { text: 'Close' }, // no special processing here { text: 'I will always close', onAction: () => true }, { text: 'I never close', onAction: () => false } ]; } dialogInit(reference: ComponentRef, options: Partial<IModalDialogOptions>) { // no processing needed } }
Step 5: Open the component in which you want to use this Modal popup and add the following code.
//add imports import { ModalDialogService, SimpleModalComponent } from 'ngx-modal-dialog'; import { MyModalComponent } from '../../my-modal/my-modal.component'; // your custom component path // inject following classes in your constructor constructor( private modalService: ModalDialogService, private viewRef: ViewContainerRef ) { } Create function to open the popup openpopup(){ this.modalService.openDialog(this.viewRef, { title: 'Some modal title', childComponent: SimpleModalComponent settings: { closeButtonClass: 'fa fa-close' }, data: { text: 'Some text content' } }); }
That's it call this function from your view to open the popup
Code for Confirm popup with action button Angular 4, Angular 5, Angular 6
deleteRecord(user_id){
this.modalService.openDialog(this.viewRef, {
title: 'Delete',
childComponent: SimpleModalComponent
data: {
text: 'Are You sure You want to delete this?'
},
placeOnTop: true,
settings: {
closeButtonClass: 'close theme-icon-close'
},
actionButtons: [
{
text: 'Yes',
buttonClass: 'btn btn-danger',
onAction: () => new Promise((resolve: any, reject: any) => {
alert("deleted");
resolve();
})
},
{
text: 'no',
buttonClass: 'btn btn-default',
onAction: () => new Promise((resolve: any) => {
resolve();
})
}
]
});
}
Leave A Comment :
Valid name is required.
Valid name is required.
Valid email id is required.