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.

Dialog with inline Template

See original GitHub issue

Bug, feature request, or proposal:

feature request

What is the expected behavior?

I’d like to use something like this (just like mat-menu):

<button (click)="myDialog.open()">Open it</button>

<mat-dialog (result)="onResult($event)" #myDialog>
  <h1 mat-dialog-title>Dialog Title</h1>
    <mat-dialog-content>
        Content
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button [mat-dialog-close]="false">Cancel</button>
        <button mat-button [mat-dialog-close]="true">Confirm</button>
    </mat-dialog-actions>
</mat-dialog>

What is the current behavior?

Doesn’t exist as fat as I have seen in the docs and source code.

What are the steps to reproduce?

I’ve created a small component which demonstrates what I’m looking for: https://stackblitz.com/edit/angular-material2-issue-tp5aej?file=app%2Fapp.component.html (I didn’t get mat-dialog-close working with the projection, though I chose to just add a method to my dialog component)

What is the use-case or motivation for changing an existing behavior?

There are many use cases where I just want a very simple dialog, and don’t want to write 30 lines of code.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6 beta Material 6 beta

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:12
  • Comments:14 (6 by maintainers)

github_iconTop GitHub Comments

13reactions
kimamulacommented, Oct 20, 2018

I would like to add that if you need MatDialogRef instance in your dialog component in the <ng-template> pattern @Chan4077 suggested above, it’s as easy as:

<ng-template #myDialog let-dialogRef="dialogRef">
  <my-dialog [dialogRef]="dialogRef"></my-dialog>
</ng-template>

I like this usage and I think it would be nice if the usage is clearly documented.

9reactions
arlowhitecommented, May 14, 2019

IMO, this is a documentation issue. https://material.angular.io/components/dialog/overview needs an example with TemplateRef using implicit context. This is difficult to figure out if you’re not comfortable looking at material2’s source code.

The $implicit context is bound to MatDialogConfig.data, which I don’t think most people know about. So in this code example, foo, which is arbitrary, is bound to $implicit, which is from MatDialogConfig.data, see material2/src/lib/dialog/dialog.ts _attachDialogContent()

<ng-template #myTemp let-foo>
  <h2 matDialogTitle>My Title</h2>
  <mat-dialog-content>
    <p>{{ foo.myProperty }}</p>
  </mat-dialog-content>
</ng-template>

Then, you need to bind TemplateRef in your component, or just pass it by reference when calling a function from the template.

      <button mat-stroked-button
              (click)="openDialog(myTemp, myData)">
          Open Dialog
      </button>

Component .ts

  openDialog(templateRef: TemplateRef<MyData>, myData: MyData) {
    this.dialog.open(templateRef, { data: myData });
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

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 >
Ng Template Mat Dialog - StackBlitz
Showcases a demo for using ng-template with Angular Material's dialog component. ... import { Component, TemplateRef, ViewChild }. from '@angular/core';.
Read more >
Angular material: is it possible to create modals (or dialogs ...
In my project I am using ngx-bootstrap's dialog component which takes your ng-template and displays it as your modal. Using ng-template is ...
Read more >
Inline Dialog - Universal Theme - Oracle APEX
... the current page within a modal dialog. Create a region, set its "Position" attribute to Inline Dialogs, and use Inline Dialog as...
Read more >
Dialog/Inline template | Blazor Forums - Syncfusion
I'm working with a grid that I setup an inline dialog template for. What I'm trying to work out is how to set...
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