Angular2: *ngFor does not update when array is updated

dom is not updating when i change the array that is binded to an ngfor
angular 6 ngfor not updating
ngfor not updating when array changes angular 8
angular 5 ngfor not updating
angular array push not updating
angular 2 view will not update after variable change in subscribe
force ngfor to update
ionic ngfor not updating

I have an array of objects (let's call it arr). In one of my component's inputs in the (change) method I modify one of these object's attribute, but in the view (*ngFor) nothing changes. I read that Angular2 change detection doesn't check the contents of arrays or object, so I tried these:

this.arr = this.arr.slice();

and

this.arr = [...this.arr];

But the view doesn't change, it still shows the old attribute. In the (change) method with console.log() I got the correct array. Weird, but this one works: this.arr = []; I tried NgZone and markForCheck() too.

Try creating a deep copy by doing

this.arr = Object.assign({}, NEW_VALUE);

My view does not update when i change my array in *ngFor, If you are simply pushing object or data into an array, angular wont detect it as changed property (which is bad). Because you did not completely  NgFor doesn't update data with Pipe in Angular2. In this scenario, I'm displaying a list of students (array) to the view with ngFor: It's wonderful that it updates whenever I add other student to the list. It does not update the list until I type something in the filtering student name field. Here's a link to plnkr.

You could also use the trackBy option in your *ngFor expression, providing a unique ID for every item inside the array. This does make you 100% responsible for change detection, so update this (unique) property every time the item in the array changes. Angular will then only re-render the list if any item inside your array has been given a different trackBy property:

*ngFor="let item of (itemList$ | async); trackBy: trackItem"

or:

*ngFor="let item of itemList; trackBy: trackItem"

where:

trackItem is a public method in your component:

public trackItem (index: number, item: Item) {
  return item.trackId;
}

Making you *ngFor render again. - Matheus CAS, So, we have to update our data structure to reflect the changes from cart: the After that, I re assigned the items list and the Angular updated my items. … (3) could it be, but if the reordering would trigger the new rendering, why it didn't happen? Furthermore, when a element changes its position in the array, Angular  It won't call a pure pipe if you change an input month, add to an input array, or update an input object property. This may seem restrictive but it's also fast. An object reference check is fast—much faster than a deep check for differences—so Angular can quickly determine if it can skip both the pipe execution and a view update.

  1. Check if your component is configured with changeDetection:cHangeDetectionStrategy.OnPush, if you are going this then after updation of array you have to call changeDetectorRef.markForCheck()
  2. You can also implement onChange lifecycle hook and change values of array inside this function.

[SOLVED] DOM is not updating when I change the array that is , Hello, I'm building an app using Ionic 2 alpha 53, Angular 2, Typescript. [​SOLVED] DOM is not updating when I change the array that is binded to an ngFor retrieved the items from my provider, it does not update the DOM. Angular doesn't recognise an array as having been changed if only it's contents have been changed. To let it know the array has changed just reassign the array object after removing an element and it should update on the DOM: this.rows.splice(this.rows.length - 1, 1); this.rows = [this.rows];

Since you mentioned that you already tried markForCheck(), you should try detectChanges instead (that just what worked for me and markForCheck did not work). For those that need the steps:

Add ChangeDetectorRef to your imports:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

Add ChangeDetectorRef to your constructor:

constructor(
    private changeDetection: ChangeDetectorRef
  ) { }

Then on the next line after you update the array:

this.changeDetection.detectChanges();

Component in *ngFor not updating UI on data change, Component in *ngFor not updating UI on data change · Angular class="option-​grid" *ngFor="let option of arrayData.option; let i of index;"> <radiobutton I put a ngDoCheck in to see if the data is coming down and it does: When an item is added or updated inside the array, the ngFor is triggered and the DOM is updated. However, when an item is removed, the array is changed, but the DOM does not remove the entry for that item. The {{children.length}} also does not get updated when removing an item. It does when adding or updating.

I solved this error by adding a changDetection directive on @component as follows

    @Component({
      selector: 'app-page',
      templateUrl: './page.component.html',
      styleUrls: ['./page.component.scss'],
      changeDetection: ChangeDetectionStrategy.Default
    })

You also need to import it

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

There are two strategies onPush and Default

The onPush uses the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Change detection can still be explictly invoked.

while the Default uses the CheckAlways strategy, in which change detection is automatic until explicitly deactivated.

Source Docs

Why didn't my Angular View Update when I , Why didn't my Angular View Update when I added items to the input array? Posted At : April 2, loop over the array: <div *ngFor="let item of items"> While the items in the array changed, the array pointer did not. An easy  As the input list gets modified, ngFor will try to avoid to constantly create and destroy the DOM elements of the list, as this is an expensive operation. Also, when we pass to ngFor a new list, this does not mean that the whole list will be re-built, meaning all the DOM re-created.

UI not updated when array is changed - help? : angular, I'm displaying an array of data using an ngFor in the template, and at some point are successfully retrieved and added to the array, but the UI does not update. Seems like it doesn't update through push but if you set the data array to a value it then updates. i.e data.push() does not work. data = newArray works.

ngFor on Array of objects not updating DOM elements properly , After I updated my angular 2 project from RC4 to 2.0.1 I'm having a problem with a ngFor looping on an array of objects (It was working fine on  The new data items are successfully retrieved and added to the array, but the UI does not update. If I carry out another action in the UI (e.g. tab switch) then when I come back the new data items are there. This is not the only UI refresh issue I'm having, but it is the most pressing. The component's template is very simple:

Angular2: *ngFor does not update when array is updated - html, This does make you 100% responsible for change detection, so update this (​unique) property every time the item in the array changes. Angular will then only​  But that is not exactly what we want right? We also want to insert the value of each element in between the tags, right? Working with each element of the list. To do that, we need kind of a reference to each element of the array right? Fortunately, the angular ngFor directive does provide just that.

Comments
  • It's not a deep copy, it's a shallow one. And this code works for objects, not for arrays, doesn't it?
  • Weird that you had to specify you wanted to use the default value. Is there any place in your configuration where you would define your changeDetectionStrategy as onPush by default ?
  • Yes, in some other components, while using angular with firestore, there some instances i had to specify onPush changeDetectionStrategy especially when using local arrays with data that was hardcoded onto a service file.