Questions tagged [mat-dialog]
145 questions
1
vote
0 answers
Is there a way to make the backdrop of mat-dialog clickable when the close is on disable?
I have developed a mat-dialog that only closes when I click on the close button that means it is set to disabled. I would like to have input in the background when my dialog is open. How can this be enabled?
Code:
// Important snippet from dialog…
user10114552
1
vote
1 answer
pass API data to a MatDialog by ID
I have a list of API data but not all data is presented. I try to get popUp via MatDialog to present more details which in that situation is "Comment". of course linked to the correct ReferennceNo/ column..Any suggetions?
ParentComponent.ts:
…

user3419157
- 19
- 6
1
vote
1 answer
Prevent MatDialog instance from destroying
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…

Anita Mishra
- 65
- 8
1
vote
2 answers
Display different information in Mat-Dialog depending on object?
My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object.
export interface Allbox {
image: string,
link: string,
…

bensalerno
- 467
- 1
- 6
- 22
1
vote
1 answer
Adding to component constructor in Angular makes the entire page return blank?
I am trying to add a basic MatDialog to my project. In the project I have 2 components, a header for the page and another called "CardBox", which basically just holds cardboxes of links to different websites.
When you click on the "i" icon, I would…

bensalerno
- 467
- 1
- 6
- 22
1
vote
2 answers
Angular mat-button style is not apllied in mat-dialog
I have a project Angular 9. All works fine, but when mat-dialog is opened it contains a couple of buttons. And material-style is not applied to these buttons. I wonder why. The problem exists only an mat-dialog window. In other pages all works fine:…

Mr. H3xag0n
- 13
- 4
1
vote
3 answers
mat-dialog not opening on page load properly
I'm trying to get mat-dialog to open whenever a specific url is loaded. Currently it only works if you do a full page reload. I want it to launch the mat-dialog whenever this specific angular route is loaded no matter if it's a full page load or…

user6680
- 79
- 6
- 34
- 78
1
vote
0 answers
mat-dialog with tabs not working in angular
I want to show 2 tabs while opening a dialog. But dialog only consists tab texts, Tabs are not working. Here is my code,
dialog-overview-example-dialog.component.html
Content 1

Pavithra Muthusamy
- 255
- 1
- 3
- 13
1
vote
0 answers
Angular: Mat-Table not updating after Mat-Dialog close
I have a dialog box with a form. After inserting data on clicking save the HTTP POST service gets called and data gets inserted in the database.
This dialog component is connected with a parent component where a table (Mat Table) is displayed. This…

Avishek
- 524
- 16
- 38
1
vote
1 answer
Dynamically Creating Mat Dialog Config
I provide MAT_DIALOG_DEFAULT_OPTIONS in app.module.ts to create global defaults for MatDialog dialogs:
function matDialogProviderFactory() {
const matDialogConfig: MatDialogConfig = {/* presets */};
if (/* some condition */) {
…

Rohan Khajuria
- 636
- 2
- 12
- 26
1
vote
1 answer
avoid creating dialog wrapper components in angular
I'm using angular material to open dialogs. I have a lot of components that are getting openend in dialogs but as a matter of good separation of concerns I want to avoid baking in dialog behavior to the compoent.
I have have a wrapper component…

Ken
- 1,529
- 12
- 12
0
votes
0 answers
MatPaginator - Prevent Page Size Changes when there are "unsaved changes"
I have an Angular Material Table that takes accepts data from an API, and performs pagination on the frontend. These records that come from the API, frontend users can enable/disable a part of them with a checkbox visible in each row.
What I would…

TheAtomicPeter
- 147
- 1
- 7
0
votes
0 answers
In angular, mat-autocomplete won't close on click outside when opened in mat-dialog
I am working with form inside mat-dialog and i have problem with closing mat-autocomplete dropdown when clicked outside. I have mat-select implemented the sam way and he is working properly.
Here is my implementation for both elements
Autocomplete
…

Josip Maričević
- 189
- 3
- 18
0
votes
1 answer
ERROR NullInjectorError: R3InjectorError(AppModule)[MatDialogConfig -> MatDialogConfig]:
I am working on an Angular App and get the following exception:
ERROR NullInjectorError: R3InjectorError(AppModule)[MatDialogConfig -> MatDialogConfig]:
This is my app.module.ts
It contains the import for MatDialogModule
It also contains providers…

FJ97
- 3
- 3
0
votes
1 answer
How to set focus on an element inside a component inside a Mat Dialog?
I'm aware of the property autoFocus, that can receive a CSS Selector to focus an element when a MatDialog is open.
I need to target a submit button that is inside the component , how can I target…

Ruslan
- 1
- 2