Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

passing parameter to mat-dialog open method

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);
like image 963
faisaljanjua Avatar asked Mar 01 '19 06:03

faisaljanjua


People also ask

How do you pass data into mat dialog?

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.

What is MatDialogRef?

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.

How can I close mat dialog on button click?

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.

How to pass data to the dialog component in MATLAB?

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:

How to pass data from Mat dialog to parent component in angular?

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

How to open the dialog box component using matdialog?

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.

How do I pass data to a dialog component in Android?

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:


2 Answers

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;
like image 142
Yisi Tan Avatar answered Oct 02 '22 14:10

Yisi Tan


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

like image 22
Anil Kumar Reddy A Avatar answered Oct 02 '22 15:10

Anil Kumar Reddy A