Imagine having an *ngFor loop where a local variable is defined like this:
<div *ngFor="let item of items">
<p>{{item.name}}</p>
<div *ngIf="item.colorVisible">{{item.color}}</div>
<button (click)="item.colorVisible = !item.colorVisible">Toggle Color</button>
</div>
You are iterating through an array of objects, with a sample array in TypeScript being:
export class AppComponent {
items = [
{
name: 'John',
color: 'Green'
},
{
name: 'Jim',
color: 'Blue'
},
{
name: 'Jane',
color: 'Orange'
}
]
}
Is there a way to have a button outside the loop that toggles all variables and updates the scope?
Take a look at this StackBlitz demo.