@Input dont get updates values - Angular

Question

I have many Arrays in a component and i need to pass this information for the sun's component. I think do that from @Input method. In the parent component i give many pushs in thats arrays. After finishing the pushes I would need the @Input to be given to the child component. But the way I'm trying, it's getting the initial value of Arrays, like 0 or empty. Can someone help me?

Parent Component HTML:

<div class="past-information">
   <app-lunch-review-dialog [namePackage]="packageName" [estaticValue]="valueEstatic" 
   [valueBag]="packageValue" [linkImage]="packageImage" [amountBag]="packageAmount" 
   [finalValueBag]="sum"></app-lunch-review-dialog>
</div>

Sun Component TS:

 @Input() namePackage: Array<string> = []
 @Input() estaticValue: Array<string> = []
 @Input() valueBag: Array<string> = []
 @Input() linkImage: Array<string> = []
 @Input() amountBag: Array<string> = []
 @Input() finalValueBag: number;

Parent code fills the array:

    let bagValue = this.packageSelected.value.toString()
    let bagName = this.packageSelected.name
    let bagAmount = this.packageSelected.bagAmount.toString()
    let bagImage = this.packageSelected.imagePath
    this.packageName.push(bagName);
    this.valueEstatic.push(bagValue)
    this.packageValue.push(bagValue);
    this.packageImage.push(bagImage);
    this.packageAmount.push(bagAmount);

How i call the @Input in the Child Component:

ngOnInit(){
console.log("@Input NP is " + this.namePackage);
console.log("@Input EV is " + this.estaticValue);
console.log("@Input VB is " + this.valueBag);
console.log("@Input LI is " + this.linkImage);
console.log("@Input AB is " + this.amountBag);
console.log("@Input FVB is " + this.finalValueBag);
}

When i call that console.log returns this way: console.log

Unless you changed the change detection strategy, this should work. Can you please show us the code that makes you say the arrays stay empty? Also, the code that fills the arrays maybe? — Salketer, Oct 18 '22 at 13:25
I suggest you to take a look to this https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property or to the answer of SureN — Majico, Oct 18 '22 at 13:52

score 0 · Answer 1 · answered Oct 18 '22 at 13:30

0

When you push, the reference is not changed and so the child component will not refresh. So, try changing the reference of the original array after pushing.

For example:

In Parent component,

this.packageName.push("something");
this.packageName = [...this.packageName]

answered Oct 18 '22 at 13:30

SureN

752
7
13

I tried this but nothing has changed, in my child component still returns empty – Vinícius Kock Oct 18 '22 at 13:52
@ViníciusKock it might be because you add the elements AFTER the component has initialized. Please provide your full code. – MGX Oct 18 '22 at 14:40
@MGX yes, i add the elements in a function when i click the button on my page. The full code is on my github, at this link: https://github.com/Kock03/Restaurante - Components in question: lunch-details.component and lunch-review-dialog.component – Vinícius Kock Oct 18 '22 at 14:47
@ViníciusKock implement this solution, then console.log into the `ngOnChanges` function, not in the `ngOnInit` function – MGX Oct 18 '22 at 14:51
@MGX Oooh this work for me! Now my values appear correctly! Thankss. You know how i call this values in a functions? – Vinícius Kock Oct 18 '22 at 16:16
Sorry I didn't get your question ? – MGX Oct 18 '22 at 19:08

@Input dont get updates values - Angular

1 Answers1