Passing Data with MatDialog to form

hi I want passing multi data with mat dialog to form please help me

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import {DialogComponent } from '../../misc/dialog.component';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  dialogResult = "";
  firstname: string = ;
  lastname: string;
  gender: boolean = true;

  constructor(public dialog: MatDialog) {  }

  ngOnInit() {
 }

  doChartSetting(){
    let dialogRef = this.dialog.open(ChartDialogComponent, {
        width:'600px',
        data: { firstname: this.firstname, lastname:this.lastname,this.gender}
    });    

    dialogRef.afterClosed().subscribe(result => {

      this.firstname= result;
      this.lastname= result;
      this.gender= result;
    });
    
  }
}

My Dialog:

mport { Component, OnInit, Inject , ViewChild , Input , Output, EventEmitter , AfterViewInit} from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<DialogComponent>,@Inject(MAT_DIALOG_DATA) public data:any) { }

  ngOnInit() {
  }

  onClose(): void {
    this.dialogRef.close();
  }

}

dialog-component.html

<div class="dialog-wrapper">
	<h3 mat-dialog-title >
		Dialog
	</h3>
	<mat-dialog-content>
		mat-form-field>
			    <input matInput placeholder="firstname" [(ngModel)]="data.firstname">
			  </mat-form-field>

			  <mat-form-field>
			    <input matInput placeholder="lastname" [(ngModel)]="data.lastname">
			  </mat-form-field>

			  <mat-checkbox [(ngModel)]="data.gender">gender</mat-checkbox>


	</mat-dialog-content>
	<hr>
	<mat-dialog-actions>
		<button mat-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>ذخیره</button>
		<button mat-button (click)="onClose()">close</button>
	</mat-dialog-actions>
</div>

[josephperrott]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[aloketewary]

You can always use like this:

componentData: any = { 
   firstname: 'Something', 
   lastname:'Important',
   gender: 'M',
   address : {
     city: 'somewhere'
   }
};

let dialogRef = this.dialog.open(ChartDialogComponent, {
        width:'600px',
        data: { comp: this.componentData }
    });  

and in your DialogComponent you can access it like:

 <mat-form-field>
        <input matInput placeholder="lastname" [(ngModel)]="data.comp.lastname">
 </mat-form-field>
<mat-form-field>
        <input matInput placeholder="cityAddress" [(ngModel)]="data.comp.address.city">
 </mat-form-field>