In angular how to create a custom confirmation dialog box? not understood? ok let me explain. Suppose in your application you are showing the list of students. If you want to delete a student from the list what will you do, you will click the delete button of the row which you want to delete.
So before delete you need to to show a confirmation message to the user if, he/she surely want to delete or not , for this you will probably use the JavaScript confirmation box.

But in case of angular what you would do to show the message ? alternatively how would you create the same confirmation dialog box using angular.
In this tutorial we are going to explain how to create a confirmation dialog box in angular.

At first we have we have to create a component in angular and a service. we can create the service.ts in the same folder of the component or in the component folder.

Lets create a angular project and create a component named confirmation-dialog in it then create confirmation-dialoge.service.ts in it.

now open the confirmation-dialog.component.html file in component folder then write the following code

<div class="modal-header">
 
<h4class="modal-title">{{ title }}</h4>
 
<buttontype="button"class="close"aria-label="Close" (click)="dismiss()">
 
<spanaria-hidden="true">&times;</span>
 
</button>
 
</div>
 
<divclass="modal-body">
 
{{ message }}
 
</div>
 
<divclass="modal-footer">
 
<buttontype="button"class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
 
<buttontype="button"class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
 
</div>
 
 

Now open confirmation-dialog.component.ts file and write the following code

 
import { Component, Input, OnInit } from '@angular/core';
 
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@Component({
 
selector: 'app-confirmation-dialog',
 
templateUrl: './confirmation-dialog.component.html',
 
})
 
export class ConfirmationDialogComponent implements OnInit {
 
@Input() title:string;
 
@Input() message:string;
 
@Input() btnOkText:string;
 
@Input() btnCancelText:string;
 
constructor(private activeModal:NgbActiveModal){}
 
ngOnInit() {
 
}
 
public decline(){
 
this.activeModal.close(false);
 
}
 
public accept(){
 
this.activeModal.close(true);
 
}
 
public dismiss(){
 
this.activeModal.dismiss();
 
}
 
}
 
 

Now open confirmation-dialog.service.ts file and write the following code

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { ConfirmationDialogComponent } from './confirmation-dialog.component';

@Injectable()
export class ConfirmationDialogService {

  constructor(private modalService: NgbModal) { }

  public confirm(
    title: string,
    message: string,
    btnOkText: string = 'OK',
    btnCancelText: string = 'Cancel',
    dialogSize: 'sm'|'lg' = 'sm'): Promise {
    const modalRef = this.modalService.open(ConfirmationDialogComponent, { size: dialogSize });
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = btnOkText;
    modalRef.componentInstance.btnCancelText = btnCancelText;

    return modalRef.result;
  }

}


now open app.component.ts and write the following code in it

public openConfirmationDialog() {
this.confirmationDialogService.confirm('Please confirm..', 'Do you really want to ... ?')
.then((confirmed) => console.log('User confirmed:', confirmed))
.catch(() => console.log('User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)'));
}

now open app.module.ts and write the following code in it

 providers: [ ConfirmationDialogService ],
  entryComponents: [ ConfirmationDialogComponent ],

Leave comment

Your email address will not be published. Required fields are marked with *.