Passing Data with MatDialog to form #9454
Description
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>