Modal using directive using ngx bootstrap in angular

In these article, we discuss how to create modal using directive in the Angular.
1) Static modal open using directive.


<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
 
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>


import { Component } from '@angular/core';

@Component({
selector: 'demo-first-modal',
templateUrl: './modal.html'
})
export class DemoStaticComponent {}

In the above example in a button click, we called “staticModal.show()” it means we have an open directive name which has an id “#staticModal” we have bsModal directive in ngx-bootstrap module. we just assign value to it for an open popup. In modal div, we have written “bsModal #staticModal="bs-modal"


2) Nested Popup open using the directive.



<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open First modal</button>
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" (click)="childModal.show()">Open second modal</button>
      </div>
    </div>
  </div>
</div>
 
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is second modal <br>
        <button type="button" class="btn btn-primary" (click)="thirdModal.show()">Open third modal</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" bsModal #thirdModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name3">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-nested-name3" class="modal-title pull-left">Third modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="thirdModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is third modal <br>
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-nested-modal',
  templateUrl: './modal.html'
})
export class DemoNestedComponent {}

In the above example, we have created in each popup with another popup open function on the click button. Below is the running embedded code for popup open & close.

Next article we discuss on how to trigger events using directive open modal in angular.

Spread the love
  •  
  •  
  •  
  •  
  • 2
  • 2
  •  
  •