Angular 7.1 , AngularMaterial 7.3
I am trying to call function and pass some value, It prompt following error
No component factory found for t1. Did you add it to @NgModule.entryComponents?
Although t1
is included in entryComponent
. but once remove passing value to fix value it will work.
<button mat-button (click)="openDialog('t1')">T1</button>
<button mat-button (click)="openDialog('t2')">T2</button>
Once I pass value its show the above code.
openDialog(e) {
console.log(e);
const dialogRef = this.dialog.open(e);
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
dialogRef == null
});
}
@Component({
selector: 't1',
templateUrl: 't1.html',
})
export class t1 {}
@Component({
selector: 't2',
templateUrl: 't2.html',
})
export class t2 {}
but once I remove the value and fix dialogRef.open
, it works fine
const dialogRef = this.dialog.open(t1);
const dialogRef = this. dialog. open(UserDetailsComponent, { height: '70%', width: '60%', data: { name: 'John Doe', age: 23, email: '[email protected]' } }); Now, to access this data in the mat dialog, you have to inject the MAT_DIALOG_DATA in its constructor.
The MatDialogRef provides a handle on the opened dialog. It can be used to close the dialog and to receive notifications when the dialog has been closed. Any notification Observables will complete when the dialog closes.
The MatDialogRef has a built-in method close() , which you can call anytime whenever you want to close the mat dialog box. You can also close the mat dialog from the parent component i.e. the component which is calling the mat dialog.
mat-dialog-actions: this container will contain the action buttons at the bottom of the dialog Dialogs are often used to edit existing data. We can pass data to the dialog component by using the data property of the dialog configuration object. Going back to our AppComponent, here is how we can pass some input data to the dialog:
When you are working with Angular, it’s quite common to pass the data from a mat dialog to the parent component when the mat dialog closes. This can be done in two easy steps. MatDialogRef into the constructor of the dialog component. The
First we need to import ‘MatDialog’ from ‘@angular/material/dialog’ and we need to create an instance for it in the constructor. Using this instance we can open the dialog box component.
Dialogs are often used to edit existing data. We can pass data to the dialog component by using the data property of the dialog configuration object. Going back to our AppComponent, here is how we can pass some input data to the dialog: We can then get a reference to this data object in CourseDialogComponent by using the MAT_DIALOG_DATA injectable:
This works for me. You can refer to this link too. link
You can use dialogRef.componentInstance.myProperty = 'some data'
to set the data on your component.
You may need something like this:
let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, }); dialogRef.componentInstance.name = 'Sunil';
Then in your DialogComponent you need to add your name property:
public name: string;
Try something like this
constructor(
public dialogRef: MatDialogRef<Component>,
private dialog: MatDialog,
) { }
openDialog(t1) {
const dialogRef = this.dialog.open(NameComponent, {
data: { t1 }
});
dialogRef.afterClosed().subscribe(data => {
}
while retrieving in dialog component
@Inject(MAT_DIALOG_DATA) public data: any,
Hope it works
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With