question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

when MatDialog open a TemplateRef, can support to pass a context?

See original GitHub issue

Feature 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:closed
  • Created 4 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Airbladercommented, Aug 3, 2019

@crisbeto I think it’s a fair point to ask to add this to the documentation, though.

1reaction
crisbetocommented, Aug 3, 2019

The data from the dialog config is exposed as the $implicit in the template ref:

<ng-template let-yourData>{{yourData}}</ng-template>
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found