Angular 5 Modal dialog example

Sharad Jaiswal
Sharad Jaiswal

Posted On: Aug 30, 2018

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 ngx-modal module in your application at any place. I recommend to add it forRoot initialization in your main app module. So open your app.module.ts and add 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 following code in 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 your component in which you want to use this Modal popup and add 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();
            
          })
        }
  
      ]
	  });

	 
  }

    Please Login or Register to leave a response.

    Related Articles

    Angularjs Tutorials

    Why Angular JS is one of the popular JavaScript frameworks

    Why Angular JS is one of the popular JavaScript frameworks. In this article read about the key features of Angular Framework. In the era of the online shopping, every fact wants to create their presen..

    Angularjs Tutorials

    Top 10 AngularJS Interview Questions for Experience

    In case you're searching for top 10 AngularJS Interview Questions online, look no further and dive straight into the basics that usually the panelists ask during an interview.Many corporates and M..

    Angularjs Tutorials

    15 Tools and Libraries For Angular 5 Developers

    Angular tools: Exploring Tools and libraries for Angular 5 developers. Today we will discuss various tools and libraries that are essential for an effective Angular 5 project. Tools and libraries can ..

    Ask a Question