Confirm Dialog Box in Angular

Confirm dialog box is used to verify the operation is performing do you want to accept or not. Its work like if and else condition.

Example if the user need to verify i.e. are sure you want to buy this items. That time we need to use confirm() method. Its default syntax provided.

But some time we need to use some css for confirm dialog box that time Ng-bootstrap is great to use the standard confirm dialog box using model popup.

You can apply styles to this confirm dialog box to create beatiful confirm dialog box.

Lets see how to implement confirm dialog box using ng-bootstrap in angular.

 

Prerequisite

1. Node JS. To install node js please click here.
2. Angular CLI to install angular cli in your system follow this article.
3. Install @ng-bootstrap/ng-bootstrap package. If you don't know how to use ng-bootstrap please check this article.

 

Example for Confirm Dialog Box

1) Create Angular App. If you dont know how to start with angular. Follow this article How to install angular 8 in windows operating system.

 

2) Install Bootstrap 4 using this article How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

 

3) Install Ng-Bootstrap in angular app using this article How to install @ng-bootstrap to angular cli and uses of @ng-bootstrap

 

4) Create new component and register this component to app module

ng g c confirm-dialog/confirm-dialog --flat

 

5) Create service for confirm dialog box

ng g s confirm-dialog/confirm-dialog --flat

 

6) Add the html code into the confirm-dialog.component.html file

// src > app > confirm-dialog > confirm-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">&times;</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>

 

7) Add the TS code into confirm-dialog.component.ts file

// src > app > confirm-dialog > confirm-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',
})
export class ConfirmationDialogComponent {

  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;

  constructor(private activeModal: NgbActiveModal) { }

  public decline() {
    this.activeModal.close(false);
  }

  public accept() {
    this.activeModal.close(true);
  }

  public dismiss() {
    this.activeModal.dismiss();
  }
}

 

8) Create service for confirm dialog box.

// src > app > confirm-dialog > confirm-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;
  }

}

 

9) Check if the confirm dialog is register in app module or not. If not please import the confirm dialog component into app module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogService } from './confirmation-dialog/confirmation-dialog.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgbModule.forRoot() ],
  declarations: [ AppComponent, ConfirmationDialogComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ ConfirmationDialogService ],
  entryComponents: [ ConfirmationDialogComponent ],
})
export class AppModule { }

Here we use entrycomponents for loading data when the angular app is loading.

 

10) Example of confirm dialog box add this html code in app component html

//src > app > app.component.html

<button (click)="openConfirmationDialog()" type="button" class="btn btn-primary">Open dialog</button>

<p>Open the console to see log statements.</p>

 

11) Finally use confirm dialog box created service into app component to see results

// src > app > app.component.ts

import { Component } from '@angular/core';
import { ConfirmationDialogService } from './confirmation-dialog/confirmation-dialog.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private confirmationDialogService: ConfirmationDialogService) {}

  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)'));
  }
}

Finally Done.

 

Output of the above program

If you click on OK then check on console you see output User Confirmed: true

If you click on Cancel then check on console you see output like User Confirmed: false

If you click on X sign or esc button from keyboard it will not do any thing this state also tell the you are cancel the confirmation box.

Thank You !!!