Components: Passing Data with MatDialog to form

[manvfx]

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>

[djleonskennedy]

@manvfx Do Not use issue tracker for questions, ask here: https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge

[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>

[josephperrott]

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

[chethan1095]

Hi @aloketewary You are passing hard code value how to pass values based on api values please help me
thank you in advance

[aloketewary]

Please open a stackoverflow thread regarding this I will give you answer there @chethan1095 ... It will help everyone in future..

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}