angular - How do i get ng-if to reiterate the array? -

i have element *ng-for on. renders data (an array of objects) perfectly. if add element, see new data in view.

<div *ng-for="#item of items" [attr.bob]="item.bob" /> 

if modify item in list of items, need reflected in view it's not. how can make happen? ok triggering full rendering of whole array - , can adding/removing element - best practice here? perhaps there method 'dirty' #item ?

edit: changed code original version couldn't work, because version posted worked, nullifying question. i'm still curious if can force re-iteration manually though i'm leaving question up. in case here looking solution, did make dependent on property directly (index) instead of nested inside object in array.

no need of re-iterations actually. attribute binded element of array , change respectively. change of array displayed automatically.

function randomcolorhex(){   return '#'+math.floor(math.random()*16777215).tostring(16); }  @component({     selector: 'app' }) @view({   template: `     <button (click)="push()">add item</button>     <p *ng-for="#item of items" [style.color]="item.color">{{ item.title }}</p>   `,   directives: [ngfor] }) class appcomponent{   constructor(){     this.items = [       {title:"foo", color:"red"},       {title:"bar", color:"green"},       {title:"baz", color:"blue"}     ];      setinterval(() => {       let randomelement = this.items[math.floor(math.random()*this.items.length)];       randomelement.color = randomcolorhex();     }, 500);   }   push(){     this.items.push({title:"i'm new here", color:"black"});   } } 

live example