Dialog with inline Template
See original GitHub issueBug, 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:
- Created 6 years ago
- Reactions:12
- Comments:14 (6 by maintainers)
Top 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 >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
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:I like this usage and I think it would be nice if the usage is clearly documented.
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 toMatDialogConfig.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 fromMatDialogConfig.data
, see material2/src/lib/dialog/dialog.ts_attachDialogContent()
Then, you need to bind TemplateRef in your component, or just pass it by reference when calling a function from the template.
Component .ts