Events fire using directive using ngx bootstrap in angular -

In the last article, we discuss how to set up modal using directive in our angular application. In this article, we discuss how we can fire events using directive. “ModalDirective” expose mainly 4 events

1)onShow : It triggers when modal start to open.
2)onShown : It triggers after modal open.
3)onHide : It triggers when we click on close or backdrop-click.
4)onHidden: It triggers after modal close.

Below is the full example code how to call “ModalDirective” and trigger events


<div class="container">

<button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
<br><br>
<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 
<div class="modal fade" bsModal #modal="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name"
     (onShow)="handler('onShow', $event)"
     (onShown)="handler('onShown', $event)"
     (onHide)="handler('onHide', $event)"
     (onHidden)="handler('onHidden', $event)">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-events-name" class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Just another modal <br>
        Click <b>&times;</b>, press <code>Esc</code> or click on backdrop to close modal.
      </div>
    </div>
  </div>
</div>

</div>


import { Component,ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  @ViewChild(ModalDirective, { static: false }) modal: ModalDirective;
  messages: string[];
 
  showModal() {
    this.messages = [];
    this.modal.show();
  }
  handler(type: string, $event: ModalDirective) {
    this.messages.push(
      `event ${type} is fired${$event.dismissReason
        ? ', dismissed by ' + $event.dismissReason
        : ''}`
    );
  }
}

In the above example, in component we have first import ModalDirective import { ModalDirective } from ‘ngx-bootstrap/modal’;. In our modal html we have trigger events


  // HTML 
 (onShow)="handler('onShow', $event)"
 (onShown)="handler('onShown', $event)"
 (onHide)="handler('onHide', $event)"
 (onHidden)="handler('onHidden', $event)"

// Incompoent

  handler(type: string, $event: ModalDirective) {
   console.log(type);
   if(type == "onShow"){
     //trigger some code when modal start.
    }
    if(type == "onShown"){
     //trigger some code when modal open.
    }
    if(type == "onHide"){
     //trigger some code when modal start to hide.
    }
    if(type == "onHidden"){
     //trigger some code when modal close.
    }

  }

Display Output in below video.

Below is the full embedded code for Events fire using “ModalDirective.”

Spread the love

Education For Betterment

Events fire using directive using ngx bootstrap in angular

About The Author

Jugal Rana

Related Posts

About The Author