Mat Dialog pass array

Question

when the user clicks the button to bring up the information, it opens with the mat dialog. But popup is blank, data is not pass.

<form [formGroup]="userForm">
        <input type="text" formControlName="name" placeholder="Name" />
        <button class="ghost" (click)=onSubmit()>Click</button>
</form>

export class LoginComponent implements OnInit {

    data: User[] = [];
    
    constructor(private dialog: MatDialog) { }
    
    onSubmit() {
    this.registerService.getUser(this.name).subscribe((response: Array<User>) => {
      this.data = response;
    });
    
    return this.dialog.open(PopupRegisterComponent, {
      disableClose: true,
      autoFocus:true,
      data: this.data,
    });
}

export class PopupRegisterComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: User) { }

  ngOnInit() {
    console.log( this.data.name );
    console.log( this.data);
  }
}

score 0 · Accepted Answer · answered Mar 03 '21 at 18:47

Subscribe is asynchronous, so you need to open your dialog inside it :

onSubmit() {
  this.registerService.getUser(this.name).subscribe((response: Array<User>) => {
    this.data = response;
    
    // this.data isn't required here of course, depending on if you use these data elsewhere
    this.dialog.open(PopupRegisterComponent, {
      disableClose: true,
      autoFocus:true,
      data: this.data,
    });
});

You don't need to return something as well. Unless you are doing a treatment with the dialog ref but I don't think so.

Mat Dialog pass array

1 Answers1