Stack Overflow
Stack Overflow

Questions tagged [mat-dialog]

145 questions
2
votes
0 answers

How can I use material dialog as web-component to use it in the angular app

I am trying to make a material dialog as a web-components using angular elements. Opening a dialog in angular material needs to know the name of the dialog component DialogComponent. For eg. openDialog(): void { const dialogRef =…
surazzarus
  • 772
  • 5
  • 17
  • 32
2
votes
2 answers

Angular: Component scss styles not applied to tags supplied to [innerHTML] of div?

I've got a MatDialog which is supplied with an HTML string by its parent when it's constructed. The HTML string is the source of a named div's content, and contains tags embedded within the html, but for some reason the table style defined…
GGizmos
  • 3,443
  • 4
  • 27
  • 72
2
votes
1 answer

Angular Material : White color appears in the Background after clicking on Delete Rows from the Table

White Color appears in the background of the dialog box: TypeScript: config-referrals.component.ts openDialog(action, obj) { this.globalService.configAvailability = null; obj.action = action; const dialogRef =…
Ankit
  • 86
  • 2
  • 12
2
votes
1 answer

How To Prevent MatDialog From Closing When Clicked Outside

How to prevent MatDialog from closing when clicked outside but in all the dialogs in my Angular application ? I also realized that the escape key is not closing the dialog after setting disableClose to true so i added a hostlistener to force the…
Kivo
  • 385
  • 8
  • 24
2
votes
1 answer

Non-modal dialog in Angular 11

quick question. I couldn't find an answer so far. Is there any way to create a non-modal material dialog in the latest Angular version? I also looked that up here in the forum but also couldn't find a solution for older versions of Angular. I would…
xnik
  • 55
  • 6
1
vote
0 answers

How do I overlay a MatDialog inside a specific div and not the whole document?

I am using Angular 15 and Material Angular package and have a usecase where I want to restrict a MatDialog to only overlay a specific section of the webpage and not the whole document. Out of the box it seems MatDialog overlays on the whole document…
mujtaba_ahmad
  • 382
  • 3
  • 13
1
vote
1 answer

Is there a way to position an Angular Material Dialog relative to the document? To move with the scroll?

I am building a fast text functionality in an Angular app with Angular Material. On click of a form field a material dialog would pop up, containing a list of abbreviations and on select would populate the form field. I've got pretty much everything…
Morrison7252
  • 11
  • 3
1
vote
2 answers

MatDialog not rendering inside custom OverlayContainer in angular 15

In Angular 15, if a component is provided with OverlayContainer and overridden to use it as a custom container element, individual overlay elements are not rendering inside the container (), instead is appended to the document body(default…
lijo
  • 33
  • 1
  • 6
1
vote
1 answer

When matDialog pop'ups, it adds aria-hidden to element

When scanning page with ARC Toolkit (Accessibility testing plugin), if modal is opened, scanner shows error, because there is aria-hidden on parent () of one or more focusable child elements. I have removed aria-hidden with jQuery, but is there any…
Simas Navickas
  • 13
  • 2
1
vote
1 answer

dialogRef.close() is not a function opening from one component and closing from another component

I have below MatDialog export class ImportProcessingDialog extends AppComponentBase { constructor(public dialogRef: MatDialogRef) { super(injector); } onCloseClick(): void{ this.dialogRef.close(); …
San Jaisy
  • 15,327
  • 34
  • 171
  • 290
1
vote
1 answer

Angular mat-dialog opens twice

Goal: I want a mat-dialog to show when the page is loaded. Problem: I noticed that the ngOnInit is triggered twice when I have a mat-dialog in there. What I've tried: I have tried moving it around to different methods but it seems to have no…
angleUr
  • 449
  • 1
  • 8
  • 27
1
vote
0 answers

open angular mat-dialog on canvas click in full-screen mode

I have one canvas and one angular matiral dialog. The funcationality is if i am clicked on canvas in any place the angular matiral dialog is open and this funcationality is working fine. but my question is if I add canvas on full screen using bellow…
Rajendrasinh WebDev
  • 11
  • 2
1
vote
1 answer

How to use MatDialog.open inside operator iif

I just ran into the following issue function doMagic(foo: boolean) { return iif( () => foo, this.dialog.open(MyComponent).afterClosed(), of(true) ).pipe( .... ); } So, if foo === true I want to open the dialog, if…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
1
vote
1 answer

How to remove the default matDialog background

After clicking a button, a MatDialog component is opened and contains some html and other angular material components. I'm using mat-elevation-z5 class and the dialog looks like that : I want to delete the background (the Matdialog effect) and keep…
Wahéb
  • 541
  • 1
  • 5
  • 15
1
vote
1 answer

mat table inside mat dialog not diplaying my data

I'm trying to get my data and list it to the mat-table but inside in the mat-dialog i tried it and it won't show the data. .TS DeliveryReceipt: DeliveryReceiptDTO[] = []; displayedColumns:string[] = ['transactionType']; deliveryReceiptObject:…
Yan
  • 149
  • 1
  • 9
1
2
3
…
9 10