Currently, I'm exploring ways to automatically update the ngFor list when a new object is added to the array. Here's what I have so far:
component.html
export class HomePage implements OnInit {
collections: Collection[];
public show = true;
constructor(){}
ngOnInit(){
this.collections = this.collectionList;
}
_collections: Collection[] = [
new Collection('i1', 'Range Rover', 'Model 2019'),
new Collection('i2', 'Lancer Evolution', 'Model 2008')
]
get collectionList() {
return [...this._collections];
}
addItem(){
this.testAdd();
}
testAdd(){
this._collections.push(new Collection('i3', 'Chevrolet Camaro', 'Model 2020'));
}
component.ts
<ion-content>
<ion-col *ngFor="let col of collections;">
<div>{{col.title}}</div>
<div>{{col.description}}</div>
</ion-col>
<div style="padding-top:10px;">
<button type="submit" class="label-center" (click)="addItem()">Add new item</button>
</div>
</ion-content>
Check out the stackblitz link for more details.
Any insights on what could be missing in my approach?