I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the screen. The OnChange event also doesn't seem to trigger, and I've been trying to solve this issue for hours without success. Any help or guidance would be greatly appreciated.
Parent
<main-task-list [in-list]='list_values'></main-task-list>
@Component({
selector: 'main-app',
templateUrl: './main-app.component.html',
styleUrls: ['./main-app.component.sass']
})
export class MainAppComponent implements OnInit {
list_values = [ 10, 20, 30 ]
add_to_list(){
this.list_values.push(12)
console.log( this.list_values )
}
}
Child
<div>{{in_list}}</div>
@Component({
selector: 'main-task-list',
templateUrl: './main-task-list.component.html',
styleUrls: ['./main-task-list.component.sass']
})
export class MainTaskListComponent implements OnInit {
@Input( 'in-list') in_list: number[] | null = null
ngOnChanges( changes: SimpleChanges ){
console.log('re render')
}
}