Dialog with inline Template

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

[kimamula]

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.

[arlowhite]

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 });
  }