How to pass value from Child --> Parent and set into Property in specific object in array of objects?

Question

I'm trying to create an incrementor and pass it a value that the user can increment or decrement. I've created the child component and passing it the value. I can change it, etc within the child component but not sure how I pass back a value and make sure it gets set back into the exact object in an array of objects. I can even get the value back to the parent using the output. I'm just not sure using the code below to set it back to the same property that was passed in. Sorry if this is an obvious answer.

Here is my array:

    [
      "NoseTemperature": {
        "TrailerNumber": 4550,
        "LoadNumber": 90878888,
        "RefrUnitNumber": 1,
        "TempSetting": 70,
        "PlanFlag": false,
        "EmployeeNumber": 999999,
        "SetDT": "2022-06-20T05:02:44.727"
      },
      "MiddleTemperature": {
        "TrailerNumber": 4550,
        "LoadNumber": 87654321,
        "RefrUnitNumber": 2,
        "TempSetting": 31,
        "PlanFlag": false,
        "EmployeeNumber": 999999,
        "SetDT": "2022-06-20T05:02:45.23"
      },
      "TailTemperature": {
        "TrailerNumber": 4550,
        "LoadNumber": 8787654,
        "RefrUnitNumber": 3,
        "TempSetting": "OFF",
        "PlanFlag": false,
        "EmployeeNumber": 9999999,
        "SetDT": "2022-06-20T05:02:45.627"
      }
    ]

Parent Component HTNL:

     <app-incrementer [(value)]="temps?.NoseTemperature.TempSetting" [heading]="'NOSE'" (newItemEvent)="addItem($event)">
    </app-incrementer>
    <app-incrementer [value]=" temps?.MiddleTemperature?.TempSetting" (newItemEvent)="addItem($event)"
      [heading]="'MIDDLE'"></app-incrementer>
    <app-incrementer [value]="temps?.TailTemperature?.TempSetting" (newItemEvent)="addItem($event)" [heading]="'TAIL'">
    </app-incrementer>

Child Component TS

    import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
    import { MatSliderChange } from '@angular/material/slider';
    
    @Component({
      selector: 'app-incrementer',
      templateUrl: './incrementer.component.html',
      styleUrls: ['./incrementer.component.scss'],
    })
    export class IncrementerComponent implements OnInit {
    
      decrementOff: any
      incrementOff: any;
      public prevTempSetting: any;
      @Input('value') value: any;
      @Input('max') max: any;
      @Input('min') min: any;
      @Input('step') step: any;
      @Input('heading') heading: any;
      @Output() newItemEvent = new EventEmitter<any>();
      constructor() { }
    
      ngOnInit() {
      }
    
      onValueChange(event: MatSliderChange) {
        this.value = event.value;
        this.addNewItem(this.value);
      }
    
      addNewItem(value) {
        this.newItemEvent.emit(value); 
      }
    
      turnOnTemp() {
    
        if (this.prevTempSetting) {
          this.value = this.prevTempSetting
        }
        else { this.value = 0 };
      }
      turnOffTemp() {
        this.prevTempSetting = this.value;
        this.value = 'OFF';
        console.log(this.value)
      }
    
    
      incrementValue() {
        if (this.value > 119) { return } else {
          this.value = this.value + 1
          this.addNewItem(this.value);
        }
      }
      decrementValue() {
        if (this.value < -19) { return } else {
          this.value = this.value - 1
          this.addNewItem(this.value);
        }
      }
    
    }

score 2 · Accepted Answer · answered Jul 18 '22 at 05:19

You want to implement two way binding: https://angular.io/guide/two-way-binding

Add an event emitter and emit the new value when necessary.

Note that the name of the emitter must be the name of the input variable suffixed with Change.

@Input() value: any;
@Output() valueChange = new EventEmitter<any>();

incrementValue() {
  this.valueChange.emit(++this.value); // emit whenever the value changes
}

Then use banana-in-a-box notation to bind the variable in both directions.

<app-incrementer [(value)]="temps?.NoseTemperature.TempSetting"></app-incrementer>

Stackblitz: https://stackblitz.com/edit/angular-ivy-zq74mt?file=src/app/increment/increment.component.ts

That works great. Thank you... for some reason I couldn't find 2 way binding when I was doing research on input/output. — Joe Starnes, Jul 18 '22 at 12:16

How to pass value from Child --> Parent and set into Property in specific object in array of objects?

1 Answers1