Creating Generic Dialogue Box in Angular 16

 So, in this post we will see how to create generic dialogue box in angular with the help of ngx-bootstrap.

Video Link :

So, our intution is that, we will create a separate component for generic dialogue box, so that we can use it in our whole application.

Step 1: install the ngx-bootstrap, run this command in CLI to install it “ng add ngx-bootstrap”. You can read more about ngx-bootstrap, just click here.

Step 2: Create a component named “generic-dialog-box” inside app component. After creating this component your file structure would look like this.

Now, in the ‘app.module.ts’ import ‘ModalModule’ from ‘ngx-bootstrap/modal’.

like this, import { ModalModule } from ‘ngx-bootstrap/modal’; and add ModalModule.forRoot() in the imports array of module.ts.file,

Generic Dialog Box Component Code

generic-dialog-box.component.html

<ng-template #template>
  <div class="modal-body text-center">
    <p>{{messageC}} </p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

generic-dialog-box.component.ts

import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-generic-dialog-box',
  templateUrl: './generic-dialog-box.component.html',
  styleUrls: ['./generic-dialog-box.component.scss']
})
export class GenericDialogBoxComponent {
  constructor(private modalService: BsModalService){}
  @Input('messageC') messageC!: string; //we will get this message from parent component(from where it is called)
  modalRef?: BsModalRef;
  resolve: any;

  //getting access to html template
  @ViewChild('template') modalTemplate!: TemplateRef<void>;
  
  //if yes is clicked, we get 'true'
  public confirm(){
    this.modalRef?.hide();
    this.resolve(true);
  }

  //if no is clicked, we get 'false'
  public decline(){
    this.modalRef?.hide();
    this.resolve(false);
  }

  public openModal(){
    this.modalRef = this.modalService.show(this.modalTemplate, { class: 'modal-sm' });

    //creating promise to wait for result, untill user clicks yes or no
    return new Promise((resolve) =>{
      this.resolve = resolve;
    })
  }
}

App Component Code

Now, in app.component.html we are triggering this dialog box. Soo, to trigger that dailog box we have used a button, means on button click that box will appear

<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>


//this code should be placed in component wherever you want that dialogue box to apprear
<app-generic-dialog-box [messageC]="message"></app-generic-dialog-box>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { GenericDialogBoxComponent } from './generic-dialog-box/generic-dialog-box.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'GenericConfirmationDialogue';

  @ViewChild(GenericDialogBoxComponent) genericDialog!: GenericDialogBoxComponent;

  public message: string = "";

  public openModal(){
    this.message = "Do you want to leave ?"; //you can give any message
    this.genericDialog.openModal().then(
      (val) =>{
        console.log(val);
        //true or false will be received in this variable (val), so here you can perform actions based on users needs
      }
    )
  }
}