Angular 5 Modal dialog example

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();
            
          })
        }
  
      ]
	  });

	 
  }