Обновить значение из модального дочернего компонента в родительский компонент angular 8

Question

У меня есть родительский компонент, откуда я открываю модальное. (дочерний компонент).

файл parent.ts: -

    @Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ParentComponent implements OnInit, OnChanges {

     faCheck = faCheck;

     verticalArr = ['course completed',
        'attendance',
        'new attendance',
        'trainer',
        'view'];

     horizontalArr = ['time', 'city'];

    constructor(private reportService: ReportService, private router: Router, private dialog: MatDialog) {
      }

     openDialog() {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        this.dialog.open(XmodalComponent, {
          height: '50%', width: '100%',
            data: this.horizontalArr
          });
      }

      openDialog2() {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        this.dialog.open(YmodalComponent, {
          height: '50%', width: '100%',
            data: this.verticalArr
          });
      }
    }

дочерний компонент (модальный): -

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-xmodal',
  templateUrl: './xmodal.component.html',
  styleUrls: ['./xmodal.component.scss']
})
export class XmodalComponent implements OnInit {
  faCheck = faCheck;
  selectedItems = [];
  selectedHorizontalValue: string;

  constructor(public dialogRef: MatDialogRef<XmodalComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) { }

  xarray = this.data;

  ngOnInit() {
    // will log the entire data object
  console.log(this.xarray);
  }

  onHorizontalAxisSelect(key) {
    this.selectedItems = [];
    this.selectedHorizontalValue = key;
  }

  getSelectedHorizontalAxis() {
    console.log(this.selectedHorizontalValue); //<=== (select from button click either time or city
    return this.selectedHorizontalValue;
  }
}

Ребенок html (модально): -

Выбрать горизонтальную ось

<div class="axis-selection">
    <div class="menu">
        <ng-container *ngFor="let key of xarray">
            <button (click)="onHorizontalAxisSelect(key)"
                [ngClass]="{ 'selected': key === getSelectedHorizontalAxis() }">{{key}} &nbsp;&nbsp;
                <fa-icon *ngIf=" key === getSelectedHorizontalAxis() " [icon]="faCheck"></fa-icon></button>
        </ng-container>
    </div>
</div>

(То же самое с модальным компонентом)

Итак, this.selectedHorizontalValue в дочернем компоненте содержит выбранное значение. Как я могу передать это значение родительскому компоненту и сохранить его в новой переменной или сохранить с тем же именем переменной т.е. this.selectedHorizontalValue ??

Простите, я новичок в обучении машинописи.

Answer 1

Очень грубо, но согласно вашему коду,
должны применяться следующие модификации.

parent.ts:

// Code omission
export class XmodalComponent implements OnInit {
  // Code omission

  openDialog() {
    // Code omission
    const dialogRef = this.dialog.open(XmodalComponent, { // Changed line
      height: '50%', width: '100%',
        data: this.horizontalArr
      });
    dialogRef.afterClosed().subscribe(result => { // New line
      this.answerFromModel = result; // New line. Need to declare answerFromModel in class
    });
  }
  // Code omission
}

child .ts:

// Code omission
export class XmodalComponent implements OnInit {
  // Code omission

  onHorizontalAxisSelect(key) {
    this.selectedItems = [];
    this.selectedHorizontalValue = key;
    this.dialogRef.close(this.selectedHorizontalValue) // New line. Not sure when you want to close your modal... Maybe this line should be at other place
  }
  // Code omission
}