CODEWITHSUNDEEP
angulartypescript
NoobCoder
NoobCoder

Reputation: 503

Update value from modal child component to parent component angular 8

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.

Upvotes: 1

Views: 2596

Answers (1)

cxↄ
cxↄ

Reputation: 1358

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
}

Upvotes: 2

Related Questions