[Fixed] How to close the existing ngx-modal when new modal open up from same component in Angular 8


I am trying to make a reusable modal component that can be called from the same modal itself.

How I can configure the component and modal such that when the reusable component opens up the older instance will get closed directly?

Below is my stackblitz.



I would use one modal…

Here is the strategy

  1. Have the modal on the app component
  2. Create a service that will communicate when user would like to open an new modal
  3. From each of the component buttons call the service

Lets begin by defining our Service


import { Injectable } from "@angular/core";
import { BehaviorSubject, Subject } from "rxjs";

interface IModalParams {
  component: any;
  config?: any;
  title?: any;
export class MyService {
  modalOpen$ = new BehaviorSubject(false);
  show({ component, config, title }: IModalParams) {
    this.component = component;
    this.config = config;
    this.title = title;

So we have defined a show method that will set some variabes (component, configuration and title)

We have also defined a subject modalOpen$. Now any property that subscribes to this will be informed when a user has opened a new modal


  ngOnInit() {
      tap(() => this.modalRef?.hide()),
      filter(isOpen => isOpen)
      next: () => {
        const {component, config, title} = this.myService
          this.modalRef = this.modalService.show(component, config);
          if(title) {
            this.modalRef.content.title = title; 

Here we subscribe to modalOpen$ and open or close the component provided


     component: ModalContentComponent,
     config: {
      ignoreBackdropClick: false
    title: "Modal with component"

In other components, we can now use our show method as specified above

See Demo Here

Leave a Reply

(*) Required, Your email will not be published