Update value from modal child component to parent component angular 8

Question

I have the parent component from where I am opening a modal. (child component).

parent.ts file:-

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

Child Component (modal) :-

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

Child html (modal) :-

Select Horizontal Axis

<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>

(Same with ycomponent modal)

So, this.selectedHorizontalValue in the child component contains the selected the value. How can I pass this value to parent component and store it in a new variable or store with same variable name ie; this.selectedHorizontalValue ??

Pardon me I am new in typescript learning.

Does this answer your question? [Pass data from child to parent component Angular2](https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2) — Yeheshuah, Mar 06 '20 at 06:51
@Yeheshuah understood a bit , but didn't got what will be the emitter in my case. I mean — NoobCoder, Mar 06 '20 at 06:53
My bad. Obviously, [this answer](https://stackoverflow.com/questions/46075862/how-to-pass-data-modal-component-to-parent-component-using-ng-bootstrap-in-angul) is more applicable to your question. — Yeheshuah, Mar 06 '20 at 06:56
@Yeheshuah sorry , but I am unable to understand with the emit service. Can you explain according to my code. — NoobCoder, Mar 06 '20 at 07:01
Take a look at Material example, data is sent back from dialog to the component https://material.angular.io/components/dialog/examples Button in the Dialog html can have value like **[mat-dialog-close]="key"** — Nikhil Walvekar, Mar 06 '20 at 07:04

score 2 · Accepted Answer · answered Mar 06 '20 at 07:29

Very roughly, but according to your code,
following modifications should be applied.

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
}

Thanks , understood completely now. – NoobCoder Mar 06 '20 at 09:27 — NoobCoder, Mar 06 '20 at 09:27

Update value from modal child component to parent component angular 8

1 Answers1