How to update parent component when using MatDialog in angular? - angularjs

Question

I need to pass data from a dialog, back to the parent component.
I found the same question from another user, but I cant get mine to work, but I cant get the thing to work:
Angular 6 - MatDialog - EventEmitter - share object to parent component from MatDialog
here is the parent html:
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Open </button>
here is the parent ts:
openDialog(){
console.log('openDialog')
this.dialog.open(EditChannelFieldsComponent,
{
width:'50%',
data: "right click"
})
}
here is the childs html:
<form [formGroup]="form" (submit)="onSaveChannelFields()" *ngIf="!isLoading">
<mat-form-field>
<input matInput type="text" formControlName="name" placeholder="Data name">
<mat-error *ngIf="form.get('name').invalid">Please enter data name.</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="text" formControlName="description" placeholder="Data description">
<mat-error *ngIf="form.get('description').invalid">Please enter data description.</mat-error>
</mat-form-field>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</form>
here is the child ts:
onSubmitReason = new EventEmitter();
form: FormGroup;
ngOnInit() {
this.initializeFormAndItsFields();
}
initializeFormAndItsFields() {
this.form = new FormGroup({
name: new FormControl(null, {
validators: [Validators.required]
}),
description: new FormControl(null,{
validators:[Validators.required]
}),
});
}
onSaveChannelFields(){
this.onSubmitReason.emit("selectedIssue");
}
I know am close but I can't pin point the issue.
any help is appreciated!

Answer 1

here is the solution that worked
parent ts:
const dialogRef = this.dialog.open(EditChannelFieldsComponent);
const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
this.channelFields = [...this.channelFields, data];
});
dialogRef.afterClosed().subscribe(result => {
subscribeDialog.unsubscribe();
});
child ts:
onSaveChannelFields() {
console.log('emitting data')
const formData = { name: this.form.value.name, description: this.form.value.description };
this.onSubmitReason.emit(formData);
}