I have a component that showcases a lineup of items (objects). My goal is to develop another component that takes in this lineup as its model (or parameter) and generates an interactive dashboard with this information. For instance, if I have a list of products along with their respective quantities and prices per unit, I aim to showcase the total price on the child component.
Upon creating the component and passing the list to the child, the total price is accurately displayed. However, whenever new items are added to the list or when modifications are made to the quantity/price of an item within the list, my child component fails to refresh itself.
I've attempted utilizing ControlValueAccessor and OnChanges
Parent Component Code:
<result [(ngModel)]="productList" [test]="armorList"></result>Child Component Code - I acknowledge that employing both model and input may not be the right approach, but I experimented with both methods, uncertain which one would be more suitable.
import { Component, Input, OnChanges, Output, EventEmitter, forwardRef, SimpleChanges } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Armor, Material } from "../armor-list.component";
import * as _ from "lodash";
@Component({
selector: 'result',
templateUrl: './result.component.html',
styleUrls: ['./result.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ResultComponent),
multi: true
}
]
})
export class ResultComponent implements ControlValueAccessor, OnChanges {
@Input() test: Product[];
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
writeValue(obj: any): void {
if (obj !== undefined && obj !== null) {
//logic to calculate the price
}
}
registerOnChange(fn: any): void {
}
registerOnTouched(fn: any): void {
}
}
Appreciate your help!