In my small application, I have two buttons that either add 1 or -1 to a list. The sum of the list is also displayed.
However, I am facing an issue with the interpolation as only the default values of the list are being displayed instead of the newly added ones.
Below is the template code:
<p>Items: {{ list }}</p> <!--This is not updating-->
<p>Sum: {{ getSumOfList() }}</p>
<button (click)="addItem(1)">Add 1</button>
<button (click)="addItem(-1)">Add -1</button>
The relevant controller looks like this:
export class HomeComponent implements OnInit {
list: number[] = [1, 2, 3, 4, 5];
constructor() { }
ngOnInit(): void {
}
getSumOfList() {
var total = 0;
for (var i in this.list) { total += this.list[i]; }
return total;
}
addItem(item: number) {
this.list.push(item);
console.log(this.list);
}
}
I need help on how to display all items of the list using interpolation syntax.