Easy way to make a confirmation dialog in Angular?

Question

Is there any not-so-complicated way to make a confirm dialog in angular 2, the idea is to click on an item and then show a popup or modal to confirm its deletion, I tried angular 2 modals from here angular2-modal, but I don't know how to make that if you confirm or cancel it does something. the click function works fine, the only problem is that I don't know too well how to use it. I also have another modal with the same plugin with the difference that I use.

this.modal.open(MyComponent); 

And I don't want to create another component just for show a confirmation box that's why I'm asking.

Answer 1

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.

1. Examples of modals using ng-bootstrap
2. 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"> 

Answer 2

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.