Currently able to establish communication between two components but unsure of how to pass the user-selected value as an Object via event emitter from the MatDialog component to the parent component. I aim to transmit the selected option's value and the text area's value as an object upon clicking the submit button.
dialog.html
<mat-select [(ngModel)]="selectedIssue" [ngModelOptions]="{standalone: true}">
<mat-option [value]="option1">Option AA</mat-option>
<mat-option [value]="option2">Option BB</mat-option>
<mat-option [value]="option3">Option CC</mat-option>
<mat-option [value]="option4">Option DD</mat-option>
<mat-option [value]="option5">Option EE</mat-option>
</mat-select>
<div>
<textarea class="mention-reason" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}"></textarea>
</div>
<button class="cancel" matDialogClose>Cancel</button>
<button class="submit" [mat-dialog-close] (click)="submitUserReason()">Submit</button></span>
dialog.ts
onSubmitReason = new EventEmitter();
submitUserReason(): void {
this.onSubmitReason.emit('hello');
}
onConfirmClick(): void {
this.dialogRef.close(true);
}
parent.ts
callSupport() {
const dialogRef = this.dialog.open(customerSupportComponent);
const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
console.log('dialog data', data);
//i can see 'hello' from MatDialog
});
dialogRef.afterClosed().subscribe(result => {
subscribeDialog.unsubscribe();
});
Appreciate any assistance provided.