Prevent MatDialog instance from destroying

Question

I have a button in my application that opens a component in MatDialog. In the component, I am making API calls. On closing MatDialog, it will be destroyed.

When I open MatDialog for the second time on click of the button, I have to again make those api calls because first instance was destroyed.

I am looking for a solution where my first instance of MatDialog is not destroyed and I don't have to make api calls every time I click on the button.

My code goes like:

this.dialogBox = this.dialog.open(FilterModal, {
      data: { filters: this.dataFilters, filtersjson: this.filtersjson },
      width: '300px',
      height: 'calc(100vh - 120px)',
      panelClass: 'custom-modalbox',
      hasBackdrop: false,
      position: { top: '120px', right: '0px' }
    });
    this.dialogBox.afterClosed().subscribe(res => {
      if (res) {
        // function();
      } else {
        // function2();
      }
    });

Answer 1

You can store the data in an behavior subject so when you call the dialog again you can fetch the old data with .next.