Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

Angular 6 | 7 | 8 | 9 make confirm dialog box using Ng-Bootstrap model popup package.

Here we see how to use Ng-bootstrap for making standard confirm dialog box model popup for angular framework.
confirm dialog box   model popup   angular 9   javascript   ngbootstrap  

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


Related Post :


Open model popup in Angular 6 | 7 | 8 | 9 using @ng-bootstrap NgbModal


How to install angular 8 in windows operating system.


Design student simple database using slick carousel implementation in angular 7 with firebase.


How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4


Design custom bootstrap 4 pagination for angular project instead of using 3rd party pagination


How to install @ng-bootstrap to angular cli and uses of @ng-bootstrap


Install Node JS in windows machine and set environment path in settings.


0replies
Leave a reply
47
Registerd Users
89
Total Subscribers
59
Total Articles
45832
Total Views