1

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();
      }
    });
Anita Mishra
  • 65
  • 8
  • Instead of that, why don't you cache the API request using `shareReplay` operator.? – Pankaj Parkar Nov 25 '20 at 16:52
  • cache won't fix my issue. I have a drop-down in my component which has a input search. Everytime, user enter, search API is called and response is stored in mat-options(on initial load, I am loading just 500 response. if I want to see options beyond 500, I need to make search API). on closing matdialog, it is destroyed, on opening it for the second time, drop-down is rendered again and will load top 500 result but my selected value is the response from that search api in first instance of MatDialog. So if destroying of matdialog is prevented, it will be helpful. – Anita Mishra Nov 26 '20 at 03:41

1 Answers1

0

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

user12372096
  • 46
  • 3