Set boolean in Angular 5 *nfFor for each iteration of the loop

0
votes

I have exported the following class in Typescript:

export class BinSetupComponent implements OnInit {

    bins = [
            {id: '001', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '2,000,000'},
            {id: '123', name:'Small Valley', comment: 'Rectangle', type: 'Feed Storage', subtype: 'Mill Mix', status: 'Inactive', capacity: '1,300,000'},
            {id: '493', name:'Hilltop', comment: 'Hexagonal', type: 'WIP Storage', subtype: 'Flour', status: 'Active', capacity: '1,200,000'},
            {id: '004', name:'Large Valley', comment: 'Other', type: 'Loadout', subtype: 'Organic', status: 'Inactive', capacity: '300,000'},
            {id: '982', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '1,000,000'}
    ];

    editingMeasurements: boolean = false;

    toggleMeasurements(index) {
        this.editingMeasurements = !this.editingMeasurements;
    }

  constructor() {}

  ngOnInit() {
  }

}

I am using the boolean variable to show/hide elements on click in each iteration of the ngFor loop. I am wondering how to toggle that variable (with my toggleMeasurements() function on click of a button in each iteration. Currently clicking the button changes the boolean for the entire view and therefore toggles all of my elements. How do I pass the index and only update that variable for the iteration where the button is clicked?

See the example on StackBlitz here...https://stackblitz.com/edit/angular-stahy5

2
javascriptangularloopstypescriptngfor

2 Answers

2
votes
this.someArray = [...]

<div *ngFor="let some of someArray">
 <a (click)="some.showMe = !some.showMe">Show/hide</a>
 <div [hidden]="!some.showMe">
  {{some.someValue}}
 </div>
</div>

This is the way I do it. You set the variable at the scope level. By default showMe will be undefined, which evaluates to false so the element will be hidden.

1
votes

You can add a property to the each object and toggle based on that value

bins = [
        {id: '001', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '2,000,000', editingMeasurements:false},
        {id: '123', name:'Small Valley', comment: 'Rectangle', type: 'Feed Storage', subtype: 'Mill Mix', status: 'Inactive', capacity: '1,300,000', editingMeasurements:false},
        {id: '493', name:'Hilltop', comment: 'Hexagonal', type: 'WIP Storage', subtype: 'Flour', status: 'Active', capacity: '1,200,000', editingMeasurements:false},
        {id: '004', name:'Large Valley', comment: 'Other', type: 'Loadout', subtype: 'Organic', status: 'Inactive', capacity: '300,000', editingMeasurements:false},
        {id: '982', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '1,000,000', editingMeasurements:false}
];

HTML will be as 

<ul *ngIf="!bin.editingMeasurements">
                    <li><span>Type</span>{{ bin.type }}</li>
                    <li><span>Sub-Type</span>{{ bin.subtype }}</li>
                    <div class="clearfix"></div>
                    <li><span>Status</span>{{ bin.status }}</li>
                    <li><span>Capacity</span>{{ bin.capacity }}</li>
                </ul>

Updated Stackblitz