Send data to a TemplateRef MatDialog

Multi tool use
up vote
1
down vote
favorite
How to get data sent to a MatDialog that is a ng-template
?
Template
<button mat-button (click)="openDialog()">Open</button>
<ng-template #dialogRef>
{{data?}} <!-- <<< Here is the problem data is undefined -->
</ng-template>
Component
export class SomeComponent {
@ViewChild("dialogRef") dialogRef: TemplateRef<any>;
constructor(private dialog: MatDialog) { }
openDialog(): void {
this.dialog.open(this.dialogRef, { data: "some data" });
}
}
angular angular-material
add a comment |
up vote
1
down vote
favorite
How to get data sent to a MatDialog that is a ng-template
?
Template
<button mat-button (click)="openDialog()">Open</button>
<ng-template #dialogRef>
{{data?}} <!-- <<< Here is the problem data is undefined -->
</ng-template>
Component
export class SomeComponent {
@ViewChild("dialogRef") dialogRef: TemplateRef<any>;
constructor(private dialog: MatDialog) { }
openDialog(): void {
this.dialog.open(this.dialogRef, { data: "some data" });
}
}
angular angular-material
What data you want to send??
– Abhishek Ekaanth
2 days ago
Any kind of data, some objects, in this case a simple string (data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with@Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.
– Sébastien
2 days ago
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
How to get data sent to a MatDialog that is a ng-template
?
Template
<button mat-button (click)="openDialog()">Open</button>
<ng-template #dialogRef>
{{data?}} <!-- <<< Here is the problem data is undefined -->
</ng-template>
Component
export class SomeComponent {
@ViewChild("dialogRef") dialogRef: TemplateRef<any>;
constructor(private dialog: MatDialog) { }
openDialog(): void {
this.dialog.open(this.dialogRef, { data: "some data" });
}
}
angular angular-material
How to get data sent to a MatDialog that is a ng-template
?
Template
<button mat-button (click)="openDialog()">Open</button>
<ng-template #dialogRef>
{{data?}} <!-- <<< Here is the problem data is undefined -->
</ng-template>
Component
export class SomeComponent {
@ViewChild("dialogRef") dialogRef: TemplateRef<any>;
constructor(private dialog: MatDialog) { }
openDialog(): void {
this.dialog.open(this.dialogRef, { data: "some data" });
}
}
angular angular-material
angular angular-material
edited 2 days ago
asked 2 days ago


Sébastien
540720
540720
What data you want to send??
– Abhishek Ekaanth
2 days ago
Any kind of data, some objects, in this case a simple string (data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with@Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.
– Sébastien
2 days ago
add a comment |
What data you want to send??
– Abhishek Ekaanth
2 days ago
Any kind of data, some objects, in this case a simple string (data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with@Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.
– Sébastien
2 days ago
What data you want to send??
– Abhishek Ekaanth
2 days ago
What data you want to send??
– Abhishek Ekaanth
2 days ago
Any kind of data, some objects, in this case a simple string (
data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with @Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.– Sébastien
2 days ago
Any kind of data, some objects, in this case a simple string (
data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with @Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.– Sébastien
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
It should be available through template variable:
<ng-template #dialogRef let-data>
^^^^^^^^
{{data}}
</ng-template>
Perfect, thanks!
– Sébastien
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
It should be available through template variable:
<ng-template #dialogRef let-data>
^^^^^^^^
{{data}}
</ng-template>
Perfect, thanks!
– Sébastien
2 days ago
add a comment |
up vote
1
down vote
accepted
It should be available through template variable:
<ng-template #dialogRef let-data>
^^^^^^^^
{{data}}
</ng-template>
Perfect, thanks!
– Sébastien
2 days ago
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
It should be available through template variable:
<ng-template #dialogRef let-data>
^^^^^^^^
{{data}}
</ng-template>
It should be available through template variable:
<ng-template #dialogRef let-data>
^^^^^^^^
{{data}}
</ng-template>
answered 2 days ago
yurzui
89.6k10173197
89.6k10173197
Perfect, thanks!
– Sébastien
2 days ago
add a comment |
Perfect, thanks!
– Sébastien
2 days ago
Perfect, thanks!
– Sébastien
2 days ago
Perfect, thanks!
– Sébastien
2 days ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239164%2fsend-data-to-a-templateref-matdialog%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
fGeUXMBZ FxG1,To7NvnPdlS,Ky4e YvsoKu ZGxzodiG9pTxuOYX,eHKtc IEGmbF9pMB1Q2JkpW,F9B48fQIKKzjjkpftC gQ8oI7
What data you want to send??
– Abhishek Ekaanth
2 days ago
Any kind of data, some objects, in this case a simple string (
data: "some data"
). It is something possible to achieve when using a separate component for the dialog (with@Inject(MAT_DIALOG_DATA) public data
in the component constructor) but I don't know how to access it with the dialog as a simple ng-template.– Sébastien
2 days ago