passing parameter to mat-dialog open method

Question

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

Solution 1

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;

Solution 2

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

Comments

[Abhishek]

if t1 is your component add this in appModule or supporting Module file in entryComponents: [] array

[Nithya Rajan]

do you have that instance of t1 in your component.ts

[Nithya Rajan]

i have updated my answer, you should get reference to your compnent class name in a property

[faisaljanjua]

after declaring t1,t2, getttin this error No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?

[Nithya Rajan]

you can try another method i have suggested

[faisaljanjua]

Let us continue this discussion in chat.

[faisaljanjua]

I though about this, but if in case of increase more buttons then like this <button mat-button (click)="openDialog('t1')">T1</button> <button mat-button (click)="openDialog('t2')">T2</button> <button mat-button (click)="openDialog('t3')">T3</button> <button mat-button (click)="openDialog('t4')">T4</button>