Events fire when modal open using ngx bootstrap in angular

In the last article, we discuss how to set up nested modal using template-ref in our angular application. In this article we discuss on Which events fire when modal open and close. There mainly 4 events fire when modal open to close. Below is the list of the events.

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

Below is the example of the Modal services fire when we pass reference as a template.



<div class="container">

<button type="button" class="btn btn-primary" (click)="openTemplateModal(templatenew)">Open modal Template Refrance</button>
<br><br>
<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
<ng-template #templatenew>
  <div class="modal-header">
    <h4 class="modal-title pull-left">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">
    Basic Modal
  </div>
</ng-template>

</div>



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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  modalRef: BsModalRef;
  events: Subscription[] = [];
  messages: string[] = [];
 
  constructor(private modalService: BsModalService, private changeDetection: ChangeDetectorRef) {
  }
 
  openTemplateModal(template: TemplateRef) {
    this.messages = [];
 
    const _combine = combineLatest(
      this.modalService.onShow,
      this.modalService.onShown,
      this.modalService.onHide,
      this.modalService.onHidden
    ).subscribe(() => this.changeDetection.markForCheck());
 
    this.events.push(
      this.modalService.onShow.subscribe((reason: string) => {
        this.messages.push(`onShow event has been fired`);
      })
    );
    this.events.push(
      this.modalService.onShown.subscribe((reason: string) => {
        this.messages.push(`onShown event has been fired`);
      })
    );
    this.events.push(
      this.modalService.onHide.subscribe((reason: string) => {
        const _reason = reason ? `, dismissed by ${reason}` : '';
        this.messages.push(`onHide event has been fired${_reason}`);
      })
    );
    this.events.push(
      this.modalService.onHidden.subscribe((reason: string) => {
        const _reason = reason ? `, dismissed by ${reason}` : '';
        this.messages.push(`onHidden event has been fired${_reason}`);
        this.unsubscribe();
      })
    );
 
    this.events.push(_combine);
 
    this.modalRef = this.modalService.show(template);
  }
 
  unsubscribe() {
    this.events.forEach((subscription: Subscription) => {
      subscription.unsubscribe();
    });
    this.events = [];
  }
}

Below is the full embedded code for Events fire when modal open & closed.

In modal currently close from outside click if you want to not close outside click we need to pass the config parameter to show method to “{backdrop: ‘static’}”. Display in below code.


this.modalRef = this.modalService.show(template,{backdrop: 'static'});

In this article we discuss how to setup modal using “services“. Next article we discuss how to setup modal using “directive“.

Spread the love

Related Posts

About The Author