Angular: input binding not updating

Question

I am currently having issues trying to bind a list to an input object in Angular. I expect the interpolated value in the child to update every time I add to the list but instead, the original loaded values remained unchanged in the view. Even the OnChange doesn't trigger, I have been wrestling with this for hours any assistance would be 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')
  }
}

Wandrille · Accepted Answer · 2019-11-20 21:02:36Z

4

The reference of you item doesn't change when you push value in it. It need to change. try to create a new item and the ngOnChange will trigger again:

this.list_values = [...this.list_values,12]

instead of

this.list_values.push(12)

answered Nov 20, 2019 at 21:02

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcello Kabora Over a year ago

Maybe is not my case but this solution is not working when I'm trying to change the value of the list of my mat-table-cell

Collectives™ on Stack Overflow

Angular: input binding not updating

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related