angularangular-cdk-virtual-scroll

Reactive Form Array Object updated but Virtual Scroll list not updating on Front End

Reproduction: https://stackblitz.com/edit/angular-rf-virtual-scroll

Expected Behavior: Data should append in Virtual Scroll list in UI

Actual Behavior

=> Virtual Scroll list not updating (front end) => Reactive Form Array Object updated perfectly (in ts)

Solution

  • This is because angular change detection will only trigger if the reference of an object changed. But by adding new elements the reference of your items.controls array stays the same.

    You could create a copy of the controls array after adding a new one like:

    addOneNew(item = [true, 9999999]){
  const obj = this.createItem(item)
  this.items.push(obj);
  this.items.controls = [...this.items.controls]
  console.log(this.items.value)
}

    By assigning a new array, change detection will see your changes and update your view.