Stop MatDialog instance from destroying

In my application, I have a button that triggers the opening of a component in MatDialog. This component makes API calls and is destroyed when the MatDialog is closed.

However, each time I open the MatDialog for the second time by clicking the button again, I have to redo the API calls because the first instance was destroyed.

I am searching for a solution where the initial instance of MatDialog is not destroyed, eliminating the need to make API calls every time the button is clicked.

This is an example of how my code currently looks:

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

One way to retain data is by using a behavior subject. This allows you to retrieve the previously stored data when reopening the dialog by calling .next.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

Retrieving the CSS property values for a specific element using Selenium

Imagine a scenario where I locate an element by its XPath using: WebElement element = driver.findElement(By.xpath("specific XPath")); While I can retrieve the value of a single CSS property with element.getCssValue("specific property"), is there a way to ...

iOS now supports fully transparent tooltips and modals, offering a sleek and

I am currently working on developing tooltips and modals for an iOS app using react-native. The problem I am encountering is that the background of the tooltips and modals is not transparent, although it appears correctly on the Android version of the app. ...

Node.js application encounters a challenge with Swagger UI requirement not being met

My Node.js application utilizes Electron v15.3.1 and includes a Swagger UI for OAS file viewing, specifically version 4.6.1. Due to a security vulnerability in the Swagger UI, I need to upgrade it. Initially, I attempted to resolve the issue by running np ...

Determining the elapsed time using Momentjs

I need assistance with a NodeJS project where I am trying to determine if a specific amount of time (like 1 hour) has passed since creating an object. My project involves the use of MomentJS. For example, if moment(book.createdAt).fromNow() shows 2 hours ...

How to verify user authorization in Angular and PHP

After setting up authentication with Angular and PHP, I noticed that when the page is reloaded, users are required to re-enter their login credentials. This happens because upon reloading, Angular's "IsLoggedIn" variable gets reset to false. Is there ...

Sending data using the AJAX method with integers

Utilizing AJAX to send a high score to a SQLite database's highScores table, the total of the high score must be calculated through a query and then retrieved back from the database. How can I ensure that the score is sent as an integer through AJAX t ...

Tips for displaying a notification about data filtering and loading using the Async Pipe in Angular

Can someone assist me with this issue? I have a code snippet that retrieves characters from an API and allows me to search for specific characters using input. I am trying to display different messages on my HTML page based on the search results. If no it ...

Display a Base64-encoded image within a row of an Ngx data table

In my ngx datatable, I have rows coming from the server that need to display icons. These icons are in base64 format and I want to show them in a specific column. How can I achieve this and also add a filter for these icons? My view renders columns from a ...

How can we change a jQuery document click function to an inline onclick function?

Under certain circumstances, I have to refactor my click function into a standalone function and trigger it using inline onClick="myFunction();" This is my current code structure: $(document).on('click','.exBtn', function(){ var ex = ...

Javascript alert: An issue has been detected when attempting to open a URL along with the user's input through Javascript

Having trouble with my javascript codes... I'm trying to create an input box and submit button. Whatever the user inputs in the box should be added to the default web URL, but it's not functioning as expected. The issue I'm facing is that ...

Is it possible for me to send transactions asynchronously using polkadot-js?

After thoroughly going through the official documentation, I stumbled upon a page discussing how to transfer using polkadot-js const transfer = api.tx.balances.transfer(BOB, 12345); const hash = await transfer.signAndSend(alice); I am curious if it' ...

What is the most effective method for delivering a Promise after an asynchronous request?

Currently, I am working on creating an asynchronous function in TypeScript that utilizes axios to make an HTTP request and then returns a Promise for the requested data. export async function loadSingleArweaveAbstraction(absId : string) : Promise<Abstra ...

Refreshable div element in a Code Igniter-powered web application

I am encountering difficulties with automatically refreshing my div using the CodeIgniter framework. My goal in the code snippet below is to have the particular div with id="lot_info" refresh every 1 second. The div is not refreshing, and an error message ...

The C# method is receiving a null array through Ajax

When I retrieve an array in a loop and pass it through an ajax call to my C# method, I'm encountering a problem where only null values are being received in my parameter. The count of the array is coming through, but the actual data seems to be lost. ...

Quick Validator. Establishing a schema that relies on specific values

I have a situation where I need to differentiate between two types of users - teacher and student. The schema for a teacher looks like this: { username : string; firstName : string; lastName : string; type : 1; // 1 = teacher schoolId : o ...

Svelte warns of potential undefined Variable when using "bind:this={}"

Whenever I attempt to utilize the bind:this attribute in Svelte, I encounter this message in vscode: 'cardGroup' is possibly 'undefined'.js(18048) Upon execution, the following error arises: TypeError: Cannot read properties of undefin ...

How can I set up routing in Angular when the component is shared among multiple modules?

I am faced with a challenge in my application where I have a shared component used across various screens. This shared component contains a back button, and when I navigate to it from different components, I want the ability to go back to the screen I ca ...

Why isn't Gzip compression working in webpack? What am I missing?

After comparing the compression results of manual webpack configuration and create-react-app for the same application, it became clear that create-react-app utilizes gzip compression, resulting in a significantly smaller final bundle size compared to manua ...

The length of the scope variable generates an error

var example = $scope.newgoal.gTitle; console.log(example.length); Even running this short code test, it throws an error message: TypeError: Cannot read property 'length' of undefined I've attempted to find various solutions without succes ...