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!

CodePudding user response：

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);
  }