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

if `t1` is your component add this in appModule or supporting Module file in `entryComponents: []` array — Abhishek, Mar 01 '19 at 06:51

score 18 · Answer 1 · answered Sep 04 '20 at 06:59

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;

Anil Kumar Reddy A · Answer 2 · 2019-03-01T07:17:26.470

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

edited Mar 01 '19 at 07:17

answered Mar 01 '19 at 06:56

Anil Kumar Reddy A

665
11
29

Nithya Rajan · Answer 3 · 2019-03-01T07:00:58.847

0

You should send a variable instead of string. it should be t1 instead of 't1'

  <button mat-button (click)="openDialog(t1)">T1</button>
  <button mat-button (click)="openDialog(t2)">T2</button>

In your component.ts, you should declare the components

public t1 = new t1();
public t2 = new t2();

or you can try the below method using template variables

  <t1 #test1></t1>
  <t2 #test2></t2>
  <button mat-button (click)="openDialog(test1)">T1</button>
  <button mat-button (click)="openDialog(test2)">T2</button>

edited Mar 01 '19 at 07:00

answered Mar 01 '19 at 06:52

Nithya Rajan

4,722
19
30

do you have that instance of t1 in your component.ts – Nithya Rajan Mar 01 '19 at 06:54
i have updated my answer, you should get reference to your compnent class name in a property – Nithya Rajan Mar 01 '19 at 06:57
after declaring t1,t2, getttin this error `No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?` – faisaljanjua Mar 01 '19 at 07:00
you can try another method i have suggested – Nithya Rajan Mar 01 '19 at 07:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189244/discussion-between-faisaljanjua-and-bear-nithi). – faisaljanjua Mar 01 '19 at 07:04

score 0 · Answer 4 · answered Mar 01 '19 at 07:11

0

openDialog(dialog : string) {
    if(dialog == "t1"){
     const dialogRef = this.dialog.open(t1,{ data: { "YOURVALUE" }});
     dialogRef.afterClosed().subscribe(result => { this.YOURVALUE = result; });
    }
    else {
     const dialogRef = this.dialog.open(t2,{ data: { "YOURVALUE" }});
     dialogRef.afterClosed().subscribe(result => { this.YOURVALUE = result; });
    }
}

answered Mar 01 '19 at 07:11

jcab

1

I though about this, but if in case of increase more buttons then like this ` ` – faisaljanjua Mar 01 '19 at 07:12

passing parameter to mat-dialog open method

4 Answers4