when MatDialog open a TemplateRef, can support to pass a context?
See original GitHub issueFeature Description
when MatDialog open a TemplateRef, how to pass data to a template, can support to pass a context?
Use Case
code:
dialogRef: MatDialogRef<any>;
list = [{
name: 'banana',
parent_id: 'fruit'
},{
name: 'pumpkin',
parent_id: 'vegetables'
},{
name: 'monkey',
parent_id: 'Animal'
}];
@ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;
constructor(
private matDialog: MatDialog,
) {
}
show(item) {
// how to pass the item to this.dialogTemplate ?
this.dialogRef = this.matDialog.open(this.dialogTemplate);
}
<ul>
<li *ngFor="let item of list" (click)="show(item)"></li>
</ul>
<ng-template #dialogTemplate let-item>
<section class="confirm-dialog">
<article mat-dialog-title class="mat-dialog-title">
<span class="text">Tips</span>
<button mat-dialog-close class="no-padding">
<i class="dialog-close ico-delete"></i>
</button>
</article>
<article mat-dialog-content>
<div>I like {{item.name}}</div>
</article>
<article mat-dialog-actions>
<button mat-button class="mat-button" >confirm</button>
<button mat-button class="mat-button" mat-dialog-close >cancel</button>
</article>
</section>
</ng-template>
Now I want to open a Dialog, and pass the item (I clicked ) as a context to the dialogTemplate.
overlayRef.attach(new TemplatePortal(templateRef, viewContainerRef, context));
Overlay can attach a TemplatePortal that maintains a context, why the matDialog not support this?
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Send data to a TemplateRef MatDialog - Stack Overflow
How to get data sent to a MatDialog that is a ng-template ? Template ... dialog: MatDialog) { } openDialog(): void { this.dialog.open(this....
Read more >Playing with dialogs and ng-templates - Codegram
In this post, I want to explain our experience working with ng-templates inside our modal dialogs, which has been the brief path that...
Read more >Managing Material Dialog with TemplateRef and no direct ...
I've seen a lot of posts talk about using the reference to handle things. E.g. const dialogRef = this.dialog.open(...).afterClosed().subscribe(.
Read more >Ng Template Mat Dialog - StackBlitz
import { MatDialog } from '@angular/material';. @Component({. selector: 'material-app', ... this.dialog.open(templateRef); ... MIT-style license that can be.
Read more >How to build a reusable Modal Overlay/Dialog Using Angular ...
A service to open the modal, than can be injected into any component ... the template, which is the content and then pass...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@crisbeto I think it’s a fair point to ask to add this to the documentation, though.
The
data
from the dialog config is exposed as the$implicit
in the template ref: