problems with ngOnChanges when updating an array

Question

I have an array that is getting updated from another component (the update is happening and Strings are getting added into the array I've checked it with a test button) but ngOnChanges wont detect any change. What is wrong with my code?

The change I apply is array.push().

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import {MatAccordion} from '@angular/material/expansion';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit, OnChanges {
  totalPrice = 0;
  constructor() { }
  @Input() Products: Array<String>;

  ngOnChanges() {
    console.log(this.Products)
  }

  ngOnInit(): void {
    
  }

}

do you have **ChangeDetectionStrategy.OnPush** somewhere in this component's parents? — Misha Borisov, Dec 22 '20 at 11:50
see here: https://stackoverflow.com/questions/65228555/is-it-possible-to-pass-data-after-initializing-the-components/65229241#65229241 — Moshezauros, Dec 22 '20 at 11:51
and the link dosent mention anything about the strategy u mentioned — Ni Tai, Dec 22 '20 at 11:53
the first comment was by someone else, and the array and object behave the same in this regard — Moshezauros, Dec 22 '20 at 12:01

Nicholas K · Accepted Answer · 2020-12-22T12:33:56.663

2

You are using incorrect syntax for ngOnChanges. Use the following:

ngOnChanges(changes: SimpleChanges) {
   console.log(changes.Products.currentValue);
}

Also, note that unless the reference to the array changes the above lifecycle hook will not get triggered. If you want the lifecycle hook to be triggered then change the reference each time you push an element to the array. For eg:

.ts

myArr = [];

add() {
  this.myArr = [...this.myArr, String(Math.random())];
  console.log(this.myArr)
}

.html

<button (click)="add()">Add more numbers</button>

<app-cart-component [Products]="myArr"></app-cart-component>

edited Dec 22 '20 at 12:33

answered Dec 22 '20 at 12:04

Nicholas K

15,148
7
31
57

1

dosent change anything – Ni Tai Dec 22 '20 at 12:11
just to mention the change that i apply is array.push() – Ni Tai Dec 22 '20 at 12:11
From where are you applying this array.push()? – Nicholas K Dec 22 '20 at 12:13
from the parent component that updates this input... anyways i decided to give up on the array and it works! but will be nice to understand how i was suppose to make this work – Ni Tai Dec 22 '20 at 12:27
I've included some more explanation along with an example, hope it helps! – Nicholas K Dec 22 '20 at 12:29
so now its like my code expect you're using spread operator instead of arr.push(). is that what makes the diffrence? if so then thank you – Ni Tai Dec 22 '20 at 12:34
and by the way the syntax i was using for onChanges is not wrong at all it works fine without array – Ni Tai Dec 22 '20 at 12:35
1

I'm changing the reference to the array each time and adding a new element. OnChanges will detect it only when reference changes and not individual element of the same reference change. – Nicholas K Dec 22 '20 at 12:37
it did help but you will have to remove the first part about ngOnChanges synthax for my to approve it since it gives missleading info. thank you! – Ni Tai Dec 22 '20 at 13:15
As per the docs, that is the recommended way to use it. More info [here](https://dev.to/nickraphael/ngonchanges-best-practice-always-use-simplechanges-always-1feg) – Nicholas K Dec 22 '20 at 13:22
nos meus testess mudando um objeto dentro do array no componente pai não dispara o ngOnChanges do componente filho – Sérgio S. Filho Nov 29 '22 at 20:20

problems with ngOnChanges when updating an array

1 Answers1