Angular 5 Modal dialog example

  • Posted by Sharad Jaiswal

    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 ..