Verify whether the mat-dialog is currently displayed

Purpose: To trigger a dialog on page load only if it hasn't already been opened. The dialog component is separate from the current page.

Issue: The dialog is opening twice.

I attempted to troubleshoot by referencing StackOverflow articles like Angular Material | Check if dialog is open, but they mention using MatDialogRef?

Typescript Code:

  ngOnInit()  
  {   
    
    // Reset InActiveV to false in case of page refresh to ensure chat calls StartPVQueue
    sessionStorage.setItem('InActiveV', "false");

    // Initiate visit on API and retrieve medical information    
    const starting = timer(500, 10000);
    this.startVSubscription = starting.subscribe(val =>{
      if (!this.isLoad) {
        this.PStartV();
        //this.cmdOpenDialog_OnInit();
      }
      else {
        this.startVSubscription.unsubscribe();
      }
    });
      this.cmdOpenDialog_OnInit();
  }

cmdOpenDialog_OnInit() {
    if (!this.dialog) {
                return;
            }
    this.dialog.open(DialogInternalNotesThreeComponent, {
        data: {
            data: this.internalNotes
        }
    }); 
}

Answer №1

One approach is to keep track of the dialog within your component:

initializeDialog() {
  if(this.dialogReference) {
    return;
  }
  this.dialogReference = this.dialog.open(DialogInternalNotesThreeComponent, {...});
  this.dialogReference.afterClosed().subscribe(() => {
    this.dialogReference = null;
  })
}

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

What is the best way to showcase a view on the same page after clicking on a link/button in Angular?

Is there a way to show a view on the same page in an Angular application when a link is clicked? Rather than opening a new page, I want it displayed alongside the list component. How can this be accomplished? Here's an illustration of my goal: I&apos ...

Creating a test suite with Jasmine for an Angular ui-grid component compiled without using $scope

I have encountered an issue while using $compile to compile a ui-grid for Jasmine testing. Initially, everything worked smoothly when I passed $scope as a parameter to the controller. However, I am now transitioning to using vm, which has resulted in $comp ...

Create a collection of unique objects using a specific key for each object in the array

Is it possible for TypeScript to define an array that enforces a unique key constraint for specified objects? Check out this demo showing the constraints. type Magician = { distinctKey: string; lastName: string; }; // How, if at all, can we make lin ...

The number associated with the 'pipe' is currently unavailable

After successfully migrating my application from Angular 4 to 7, I encountered an issue during compilation (ng build --prod). The error message displayed was: ERROR in : Template parse errors: The pipe 'number' could not be found (" </d ...

Unable to generate Angular project using the command "ng new app_name" due to error code -4058

Whenever I try to run the command ng new app-name, I encounter error -4058. If I execute the same command while opening cmd as an administrator in the directory C:/Windows/system32, the project creation process goes smoothly. However, if I change the dire ...

The data type 'number' cannot be assigned to the data type 'string'

I am encountering a specific error: The issue is 'Type 'number' is not assignable to type 'string'.' This error occurs here: swal.getContent().querySelector('strong').textContent = swal.getTimerLeft() Is there ...

Enhancing supertest functionality with Typescript

Currently, I am working on extending the functionality of supertest. After referencing a solution from Extending SuperTest, I was able to implement the following example using javascript: const request = require('supertest'); const Test = reque ...

Just completed the upgrade of my Angular project from version 9 to version 12, but now encountering issues with a module that utilizes Plotly

Here is the content of my app module file. All components and imports are in their respective places as specified in the documentation: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from &apos ...

How can I prevent all permission requests in Electron Security?

I'm currently in the process of enhancing the security of my Angular/Electron application. For this purpose, I decided to utilize electrongravity which has proven to be effective in identifying misconfigurations and prompting me to establish a permis ...

Discover the Magic of Angular 8 and Bootstrap 4 Tooltips

I'm trying to implement tooltips from Bootstrap 4 into my web application. According to Bootstrap documentation, I should initialize the tooltips with the following code: $(function () { $('[data-toggle="tooltip"]').tooltip() }) (Implement ...

The process of Angular Ahead-of-Time (AoT)

After reviewing the latest updates in Angular documentation, it seems that they have made significant changes to their approach. Previously, the process was as follows: Execute the ng eject command to generate webpack.config.js. Create webpack.config.aot ...

Material UI is not capable of utilizing Props

I'm having trouble using the Checkbox component from Material UI. Even though I can't seem to use the normal props like defaultChecked or size="small", as it gives me the error TS2769: No overload matches this call. TS2769: No overload ...

Utilize React to display a Selected button within a whitespace

Currently, I am encountering an issue in React where I have a group of buttons at the bottom. Upon selecting a button, the corresponding text should display at the top within a specified whitespace. However, I am looking to have the whitespace already occu ...

Automatically refresh your Angular 4 frontend with Spring Boot for seamless integration

Currently, I am in the process of developing a web application using Angular4 and Spring Boot java with gradle. I have successfully configured my gradle tasks following the instructions provided in this resource. By executing ./gradlew bootRun, both Java a ...

What is the most effective way to retrieve the width and height of an oversized image in Angular?

After attempting to retrieve the image width using the ngAfterViewInit method, a result of width = 0 is returned due to the large size of the image. Is there a way to accurately determine the image width without relying on a setTimeout() function? For re ...

Using useState, react, and typescript, is there a way to set only the icon that has been clicked to

When I click on the FavoriteIcon inside the ExamplesCard, all the icons turn red instead of just the one that was clicked. My approach involves using useState to toggle the icon state value between true and false, as well as manipulating the style to adjus ...

displaying post data in the URL address bar

During the development of my portal using angular 5, everything was running smoothly in the testing environment. However, due to production requirements, I made some changes to access modifiers from private to public. This modification has caused issues in ...

Steps for creating a jasmine test suite

I'm currently creating a unit test for Angular2 using Jasmine. Below is the code snippet I am working with: component.ts toggleSelect() { this.checked = event.target.checked this.tree.forEach(t => { t.checked = this.checked }) ...

Implementing child components rendering in a React application using TypeScript

Just a little background information: I am attempting to build a carousel with pagination using ReactJS. Here is the code snippet I currently have: interface HTMLCarouselT { children: Array<JSX.Element> size: number; } const HTMLCarousel = ({ch ...

best practice for updating a node in ng-zorro-antd tree

I'm attempting to make changes to the node titles in a tree structure. I have learned that the tree will only show these updates if the nodes array is changed by reference (as shown in the example). However, when I update the nodes, the tree flickers ...