Is it possible to have multiple Mat-Dialogs simultaneously displayed on screen?

Is it possible to show a mat dialog on top of another mat-dialog component? I have a grid with an edit button, and when the user clicks on it, an Edit Dialog window opens for editing data. If the user wants to close this window without saving, I want to display a new mat-dialog over the Edit Dialog asking if they want to discard the unsaved changes. Although my logic is working correctly, the second dialog does not appear. The original dialog becomes inactive, causing me to get stuck in this situation which can be seen below.

https://i.stack.imgur.com/vGGoa.png

My question is: Can multiple mat-dialogs be displayed in modal mode at the same time? And if yes, how should they be arranged to ensure proper display?

Answer №1

I found myself in a similar situation in the past, so I decided to take matters into my own hands and develop a full dialog system resembling mat dialog but with added functionality such as support for multiple dialogs, token functionality for calling dialogs in chronological order, and a button generator with observables.

After putting in some extra effort, I turned it into an open source library. You can check out some StackBlitz examples here:

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

Encountering a "Error: Uncaught (in promise): EmptyError: no elements in sequence" due to the presence of multiple Angular 9 Route Resolvers

Why do I encounter an error when attempting to use multiple resolvers in Angular routing? If I remove one of the route resolves, everything works fine. But as soon as I include both, the error occurs. https://i.stack.imgur.com/WFI5C.png https://i.stack.im ...

RxJS mergeMap waits for the completion of inner Observables before moving on to

I encountered an issue with my solution that initially appeared to be working, but when tested on a slow network: public getKeyFigureValuesForAllClients(keyFigurename: string) { const keyFigureDefintion$ = this.keyFigureDefintions$.pipe( flatMap ...

Angular 2+ seems to be failing to detect and update changes in variables within the template

I have a component that includes rendering the user's name from the profile object. The corresponding part of the template looks like this: <button mat-button [matMenuTriggerFor]="userMenu" *ngIf="isAuthenticated()"> {{profile?.name} ...

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

The Angular4 router.navigate function appears to be unresponsive and fails to perform any actions

I have implemented conditional navigation based on the customer's role in the system. Here is an example of how it works: this.GetQuickStartStatus() .subscribe(data => { if(data.isActive){ ...

How can Angular provide a visual indication when a component change occurs?

Facing a dilemma as an Angular beginner... Imagine having an application that displays the most recent price of AAPL stock. You have a component where this price is received. Each time you request data from the API, a new price is retrieved and passed to ...

When using npm link, it searches for the module in the src directory rather than the dist directory

In my experience with Angular CLI Builder, I have implemented a custom builder to extend the asset configuration in angular.json for libraries that have their own assets. To manage my workspace, I utilized nrwl. I created an Angular CLI builder library an ...

Azure deployment of a proprietary npm package

As a developer with git integration for my Angular web site, I have successfully checked code into Git and deployed it to Azure. Everything was running smoothly until I encountered an issue when trying to pull a private npm package. It dawned on me that I ...

Tips for utilizing the window object in Angular 7

To implement the scrollTo() function of the window object directly, we can use window.scrollTo(0,0). However, when researching how to do this in Angular, I found that many people create a provider as shown below: import {InjectionToken, FactoryProvider} f ...

Handling errors in Angular and rxjs when encountering undefined returns in find operations

I am currently faced with the challenge of catching an error when the variable selectionId, derived from my route, is null or contains an invalid value. My code structure has a mechanism in place to handle errors when the category variable is undefined, bu ...

Displaying icons representing different countries using Angular framework

Seeking assistance with Angular - I obtained a collection of country icons (svg format) from flat icon and intend to display them based on the respective countries in my project. With 870 icons, what would be the simplest approach to accomplish this with ...

expand the module's children routes by including additional options from another module

Imagine we have a module called "Parent" which has some child routes: const routes: Routes = [ { path: '', component: ParentComponent, children: [ { path: '/:id', ...

Issue with accessing form in Angular 6 Reactive forms for custom validator functionality

I am facing an issue with creating a password validation for reactive forms in Angular. Every time I try to verify the password, I get a “Cannot read property 'get' of undefined” error in the console. I have tried different methods to access ...

Exploring Angular: A Guide to Importing Material Components

Trying to incorporate elements such as sliders and tooltips into my project, but encountering issues with imports. I've experimented with adding the import statement for MatSliderModule in various locations like app.module.ts and specific component mo ...

Error with Cloudinary and the <cl-image> component in Angular 5 CLI

Hello there, I am currently in the process of integrating cloudinary into our website. Following the provided guidelines, I have configured it as shown below: app.module ... import { CloudinaryModule } from '@cloudinary/angular-4.x'; import { ...

Is it feasible to retrieve ADFS server users through the Auth0 API in an Asp.net C# MVC application?

Currently, I have successfully integrated ADFS user authentication using the Auth0 API in an ASP.Net application. However, I now have a new requirement to retrieve all ADFS users utilizing the Auth0 API. Is it feasible to fetch all ADFS users through the ...

Unfortunately, despite attempting to kill all processes linked to port 4200, it seems that it is still in use

Getting angular up and running on my Mac OS X 10.11.3 El Capitan has been quite a challenge. After installing nodeJS and npm, I used npm to install angular-cli. To create a new app, I executed the command sudo ng new first-app Then, I navigated into the ...

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

Utilizing Ace with a personalized theme in Angular 2 application while straying away from the default theme directory

I am currently facing an issue with integrating an Ace editor into my Angular 2 application, which is built using angular-cli. I want to link the Ace editor to a custom theme stored in the app's assets folder src/app/assets instead of within node_modu ...

Creating dynamic components in Angular 2 and adding them to the view container of the body

I've been grappling with the challenge of dynamically generating a component and then adding it to the document tag. My struggle lies in figuring out the proper method for selecting the body's ViewContainerRef so that I can easily append a new co ...