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>
<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>
  <div class="modal-body">
    Basic Modal


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

  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(
    ).subscribe(() => this.changeDetection.markForCheck());
      this.modalService.onShow.subscribe((reason: string) => {
        this.messages.push(`onShow event has been fired`);
      this.modalService.onShown.subscribe((reason: string) => {
        this.messages.push(`onShown event has been fired`);
      this.modalService.onHide.subscribe((reason: string) => {
        const _reason = reason ? `, dismissed by ${reason}` : '';
        this.messages.push(`onHide event has been fired${_reason}`);
      this.modalService.onHidden.subscribe((reason: string) => {
        const _reason = reason ? `, dismissed by ${reason}` : '';
        this.messages.push(`onHidden event has been fired${_reason}`);
    this.modalRef =;
  unsubscribe() { Subscription) => {
    }); = [];

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 =,{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