Easy way to make a confirmation dialog in Angular?
Method 1
One simple way to confirm is to use the native browser confirm alert. The template can have a button or link.
<button type=button class="btn btn-primary" (click)="clickMethod('name')">Delete me</button>
And the component method can be something like below.
clickMethod(name: string) {
if(confirm("Are you sure to delete "+name)) {
console.log("Implement delete functionality here");
}
}
Method 2
Another way to get a simple confirmation dialog is to use the angular bootstrap components like ng-bootstrap or ngx-bootstrap. You can simply install the component and use the modal component.
- Examples of modals using ng-bootstrap
- Examples of modals using ngx-bootstrap.
Method 3
Provided below is another way to implement a simple confirmation popup using angular2/material that I implemented in my project.
app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ConfirmationDialog } from './confirm-dialog/confirmation-dialog';
@NgModule({
imports: [
...
FormsModule,
ReactiveFormsModule
],
declarations: [
...
ConfirmationDialog
],
providers: [ ... ],
bootstrap: [ AppComponent ],
entryComponents: [ConfirmationDialog]
})
export class AppModule { }
confirmation-dialog.ts
import { Component, Input } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
@Component({
selector: 'confirm-dialog',
templateUrl: '/app/confirm-dialog/confirmation-dialog.html',
})
export class ConfirmationDialog {
constructor(public dialogRef: MdDialogRef<ConfirmationDialog>) {}
public confirmMessage:string;
}
confirmation-dialog.html
<h1 md-dialog-title>Confirm</h1>
<div md-dialog-content>{{confirmMessage}}</div>
<div md-dialog-actions>
<button md-button style="color: #fff;background-color: #153961;" (click)="dialogRef.close(true)">Confirm</button>
<button md-button (click)="dialogRef.close(false)">Cancel</button>
</div>
app.component.html
<button (click)="openConfirmationDialog()">Delete me</button>
app.component.ts
import { MdDialog, MdDialogRef } from '@angular/material';
import { ConfirmationDialog } from './confirm-dialog/confirmation-dialog';
@Component({
moduleId: module.id,
templateUrl: '/app/app.component.html',
styleUrls: ['/app/main.css']
})
export class AppComponent implements AfterViewInit {
dialogRef: MdDialogRef<ConfirmationDialog>;
constructor(public dialog: MdDialog) {}
openConfirmationDialog() {
this.dialogRef = this.dialog.open(ConfirmationDialog, {
disableClose: false
});
this.dialogRef.componentInstance.confirmMessage = "Are you sure you want to delete?"
this.dialogRef.afterClosed().subscribe(result => {
if(result) {
// do confirmation actions
}
this.dialogRef = null;
});
}
}
index.html => added following stylesheet
<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">
you can use window.confirm inside your function combined with if condition
delete(whatever:any){
if(window.confirm('Are sure you want to delete this item ?')){
//put your delete method logic here
}
}
when you call the delete method it will popup a confirmation message and when you press ok it will perform all the logic inside the if condition.
I'm pretty late to the party, but here is another implementation using ng-bootstrap: https://stackblitz.com/edit/angular-confirmation-dialog
confirmation-dialog.service.ts
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<boolean> {
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;
}
}
confirmation-dialog.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.scss'],
})
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();
}
}
confirmation-dialog.component.html
<div class="modal-header">
<h4 class="modal-title">{{ title }}</h4>
<button type="button" class="close" aria-label="Close" (click)="dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ message }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
<button type="button" class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
</div>
Use the dialog like this:
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)'));
}
UPDATE: Plunkr added
I was looking for a solution on all forums but found none, so found a solution with Old School Javascript Callback function.
This is a really simple and clean way to create a confirmation dialog and set Callback functions for both YES and NO click events.
I have used Bootstrap CSS for Modal and An Alert Service with rxjs Subject.
alert.component.html
<div *ngIf="message.type == 'confirm'" class="modal-body">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">{{message.text}}</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">
<a (click)="message.noFn()">
<button class="btn btn-pm">No</button>
</a>
<a (click)="message.siFn()">
<button class="btn btn-sc" >Yes</button>
</a>
</p>
</div>
</div>
</div>
alert.component.ts
export class AlertComponent {
message: any;
constructor(
public router: Router,
private route: ActivatedRoute,
private alertService: AlertService,
) { }
ngOnInit() {
//this function waits for a message from alert service, it gets
//triggered when we call this from any other component
this.alertService.getMessage().subscribe(message => {
this.message = message;
});
}
The most important part is here alert.service.ts
import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
@Injectable() export class AlertService {
private subject = new Subject<any>();
constructor(){}
confirm(message: string,siFn:()=>void,noFn:()=>void){
this.setConfirmation(message,siFn,noFn);
}
setConfirmation(message: string,siFn:()=>void,noFn:()=>void) {
let that = this;
this.subject.next({ type: "confirm",
text: message,
siFn:
function(){
that.subject.next(); //this will close the modal
siFn();
},
noFn:function(){
that.subject.next();
noFn();
}
});
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
Call the function from any component
this.alertService.confirm("You sure Bro?",function(){
//ACTION: Do this If user says YES
},function(){
//ACTION: Do this if user says NO
})
Plunkr https://embed.plnkr.co/vWBT2nWmtsXff0MXMKdd/
You could use sweetalert: https://sweetalert.js.org/guides/
npm install sweetalert --save
Then, simply import it into your application:
import swal from 'sweetalert';
If you pass two arguments, the first one will be the modal's title, and the second one its text.
swal("Here's the title!", "...and here's the text!");