I am currently using a ParentComponent to pass inputs to a ChildComponent. When the input is a number, the ngOnChanges hook successfully fires. However, when it's an array, the hook does not trigger.
Could someone help me identify what I might be doing incorrectly, or provide guidance on how to ensure ngOnChanges fires when the array is modified?
Thank you.
child ts:
export class ChildComponent implements OnInit {
@Input() num = 0;
@Input() arr: Array<string> = [];
constructor() { }
ngOnInit(): void {
}
ngOnChanges() {
console.log('input changed');
}
}
parent ts:
export class ParentComponent implements OnInit {
constructor() { }
num = 0;
arr : Array<string> =[];
ngOnInit(): void {
}
changeNumber() {
this.num = this.num + 1;
}
changeArray() {
this.arr.push('some value');
}
}
parent html:
<button (click)="changeNumber()">change num</button>
<button (click)="changeArray()">change array</button>
<app-child [num]="num" [arr]="arr"></app-child>