How to close only currently opened modal in angular using NgbModal?

Question

I want to close only currently opened modal in angular using NgbModal. but 'dismissAll()' method of NgbModal closes all the currently opened modals.

I Created Two Entry Components in the Projects

• ConsumerList //Main Component

  -AddConsumer //Entry Component //ChildModal

  -ShowAllConsumers //Entry Component //ParentModal

My Code :

    **//ShowAllConsumers.html  (Parent Modal)**

    <div class="modal-header">
      <div class="col-md-6">
        <h4>Consumers</h4>
      </div>
      <div class="col-md-6">
        <button style="float: right" type="submit" mat-raised-button color="primary" (click)="CloseModal()">
          Back
        </button>
      </div>

    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-12" id="gMap" style="min-height: 550px;width: 100%;height:100%">
        </div>
      </div>
    </div>

    <ng-template id='CLocation' #Consumer let-c="close" let-d="dismiss">
      <kt-AddConsumer [InputModel]="this.SelectedConsumer"></kt-AddConsumer>
    </ng-template>

    **//AddConsumer.html (Child Modal)**

    <div class="modal-header">
        <h4>Edit Consumer </h4>
    </div>
    <div class="col-md-6">
        <button style="float: right" id = "btnBack" mat-raised-button color="primary" (click)="CloseModal()">
            Back
        </button>
        <button style="float: right;margin-right: 10px;"
            *ngIf="this.Operation === 'ADD'" type="submit"
            mat-raised-button color="primary" (click)="SaveConsumer()">
            Save
        </button>
        <button style="float: right;margin-right: 10px;"
            *ngIf="this.Operation === 'EDIT'" type="submit"
            mat-raised-button color="primary" (click)="SaveConsumer()">
            Edit
        </button>

    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12" id="map" style="min-height: 550px;width: 100%;height:100%">
            </div>
         </div>
     </div>

output of above code is :

**//ShowAllConsumers.ts**


import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
declare const google: any;

@Component({
  selector: 'kt-ShowAllConsumers',
  templateUrl: './ShowAllConsumers.component.html',
  styleUrls: ['./ShowAllConsumers.component.scss']
})
export class ShowAllConsumersComponent implements OnInit {
  @Input() InputModel: ConsumerModel[];
  AreaCoordinates: AreaGeoCoordinates[];
  @ViewChild('Consumer') ConsumerRef: ElementRef;
  gMap: any;
  marker: any;
  Operation: string;
  SelectedConsumer: ConsumerModel;

  constructor(
    public _ngZone: NgZone,
    public chRef: ChangeDetectorRef,
    private ngbModalService: NgbModal) { }

  ngOnInit() {
    window["angularComponentRef"] = { component: this, zone: this._ngZone };
    google.maps.event.addDomListener(window, "load", this.InitializeMap());
  }

  InitializeMap() {
    this.gMap = new google.maps.Map(document.getElementById('gMap'), {
      zoom: 10,
      center: { lat: 18.519834, lng: 73.857944 },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    this.ShowCoordinates();
  }

  OpenLocationModal(AreaName, AreaRefNo, ConsumerAddress, ConsumerName, ConsumerNo, DistributorID, Latitude, Longitude, MobileNo, Pin, Source, UniqueConsumerId) {
    var m = new ConsumerModel();
    m.AreaName = AreaName;
    m.AreaRefNo = AreaRefNo;
    m.ConsumerAddress = ConsumerAddress;
    m.ConsumerName = ConsumerName;
    m.ConsumerNo = ConsumerNo;
    m.DistributorID = DistributorID;
    m.Latitude = Latitude;
    m.Longitude = Longitude;
    m.MobileNo = MobileNo;
    m.Pin = Pin;
    m.Source = Source;
    m.UniqueConsumerId = UniqueConsumerId;
    debugger;
    this.SelectedConsumer = m;
    //Opening the child modal
    var modalRef1 = this.ngbModalService.open(this.ConsumerRef, {
      windowClass: 'modalclass2',
      centered: true,
      size: "lg",
      backdrop: "static"
    });
    modalRef1.result.then(
      () => {
        alert("Close button clicked")
      }
      });
  }



  CloseModal() {
    this.ngbModalService.dismissAll();
  }

}

**//AddConsumer.ts**

import { Component, OnInit, Input, ChangeDetectorRef, Output, EventEmitter, ViewChild } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'kt-AddConsumer',
  templateUrl: './AddConsumer.component.html',
  styleUrls: ['./AddConsumer.component.scss'],
  providers: [AreawiseConsumerListComponent,NgbActiveModal]
})
export class AddConsumerComponent implements OnInit {
  @Input() InputModel: ConsumerModel;
  constructor(
    private activeModal: NgbActiveModal) { }

  ngOnInit() {

  }

  CloseModal() {
    this.activeModal.dismiss();
  }

}

When I click on Back button of child Modal, All two modal getting closed but I want to close only child modal.

Is there any way to achieve the same ?

Answer 1

In your AddConsumer.ts you need to inject a reference to NgbActiveModal and the selected consumer in the constructor.

You can also remove the hack code with the template and properties/input/binding for SelectedConsumer.

...
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class AddConsumer {
  constructor(
    @Inject('selectedConsumer') private selectedConsumer: ConsumerModel,
    private activeModal: NgbActiveModal,
    ...
  ) {
  }

  CloseModal() {
    this.activeModal.dismiss();
  }

}

Here is where you open the dialog, injecting the selectedConsumer:

OpenLocationModal(AreaName, AreaRefNo, ConsumerAddress, ConsumerName, ConsumerNo, DistributorID, Latitude, Longitude, MobileNo, Pin, Source, UniqueConsumerId) {
    var m = new ConsumerModel();
    m.AreaName = AreaName;
    m.AreaRefNo = AreaRefNo;
    m.ConsumerAddress = ConsumerAddress;
    m.ConsumerName = ConsumerName;
    m.ConsumerNo = ConsumerNo;
    m.DistributorID = DistributorID;
    m.Latitude = Latitude;
    m.Longitude = Longitude;
    m.MobileNo = MobileNo;
    m.Pin = Pin;
    m.Source = Source;
    m.UniqueConsumerId = UniqueConsumerId;
    //Opening the child modal
    var modalRef1 = this.ngbModalService.open(AddConsumerComponent, {
        windowClass: 'modalclass2',
        centered: true,
        size: "lg",
        backdrop: "static",
        injector: Injector.create({
            providers: [{
                provide: 'selectedConsumer', //maybe use an InjectionToken instead of a string
                useValue: m,
            }],
            parent: this.injector,
        }),
    });
    modalRef1.result.then(
        () => {
            alert("Close button clicked")
        }
    });