I have implemented a Material Design dialog using Angular. The initial example had only one field connected to a single parameter in the parent view. I am now trying to create a more complex dialog that collects multiple parameters and sends them back to the parent component for API submission.
Current Setup:
<h1 mat-dialog-title>Create</h1>
<div mat-dialog-content>
<p>Enter a new company name</p>
<mat-form-field>
<input matInput [(ngModel)]="data.name">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="data.name" cdkFocusInitial>Ok</button>
</div>
Desired Approach:
<h1 mat-dialog-title>Create</h1>
<div mat-dialog-content>
<p>Add details of a new person</p>
<mat-form-field>
<input matInput [(ngModel)]="data.name">
<input matInput [(ngModel)]="data.surname">
<input matInput [(ngModel)]="data.email">
<input matInput [(ngModel)]="data.mobile">
...
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="WHAT SHOULD GO HERE?" cdkFocusInitial>Ok</button>
</div>
Removing the [mat-dialog-close] property resulted in the data not being returned to the component and preventing API submission. Can you provide guidance on how to pass back these multiple values?