Nested Modal using Ngx Bootstrap in Angular

The last article we discuss how to setup Modal using template and component. In these article we discuss on how to setup Nested Modal using Template.



<div class="container">

<button type="button" class="btn btn-success" (click)="openFirstModal(templatefirst)">Open First Modal</button>
 
<ng-template #templatefirst>
  <div class="modal-header">
    <h4 class="modal-title pull-left">First modal</h4>
   
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
     <p>Education For Betterment</p>
     <br/>
    <button type="button" class="btn btn-warning" (click)="openModalSecond(templateSecond)">Open Second Modal</button>
  </div>
</ng-template>
 
<ng-template #templateSecond>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Second modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is nested modal.<br>
    <button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>

     <button  type="button" class="btn btn-danger pull-right" (click)="closeModal()">Close modal</button>

     <div class="clearfix"></div>
  </div>
</ng-template>

</div>



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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  modalRef: BsModalRef | null;
  modalRef2: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  openFirstModal(template: TemplateRef) {
    this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
  }
  openModalSecond(template: TemplateRef) {
    this.modalRef2 = this.modalService.show(template, { class: 'second' });
  }
  closeFirstModal() {
    if (!this.modalRef) {
      return;
    }
 
    this.modalRef.hide();
    this.modalRef = null;
  }

  closeModal(){
      this.modalRef2.hide();
  }

}



In the above example, we have created two templates called from one to another. Below is the full embedded code for nested modal.

Next article we discuss events of the when modal open & close.

Spread the love
  •  
  •  
  •  
  •  
  • 1
  • 1
  •  
  •