CODEWITHSUNDEEP
angularionic-frameworktoggle
Jayesh
Jayesh

Reputation: 691

How to handle toggle in multiple list items which displayed with *ngFor

I am trying to implement toggle for list of items displayed by ngFor. like when I click on the toggle button it should display the div specific to that row. Also I have to apply styles accordingly. Now I am seeing when I click on one button all rows are displaying div.Any recommendation here ?

export class VentClass {

    toggelFlagvfe: boolean = false;
    gDatas: any[];

    constructor() {
        this.gDatas = [{"ID":"85","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"},{"ID":"10","CreatedBy":"jmzw"}]},{"ID":"86","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"}]},{"ID":"87","Source":"EC","Eqpmnts":[]}]
    }


     toggleSection(item) {

         if (this.toggelFlagvfe == true) {
             this.toggelFlagvfe = false;
         }
         else {
             this.toggelFlagvfe = true;
         }
     }

}

  <ion-row *ngFor="let item of gDatas">
      <ion-col col-1>
          <button (click)="toggleSection(item)" detail-none
                  [ngClass]="{'section-active1': toggelFlagvfe, 'section1': !toggelFlagvfe}">
              <ion-icon item-left name="arrow-dropright" *ngIf="!toggelFlagvfe"></ion-icon>
              <ion-icon item-left name="arrow-dropdown" *ngIf="toggelFlagvfe"></ion-icon>
          </button>
      </ion-col>
      <ion-col col-2>
          <ion-input type="number" [(ngModel)]="item.ID" text-wrap></ion-input>
      </ion-col>
      <ion-col col-2>
          <ion-label>{{item.Source}} </ion-label>
      </ion-col>

      <div *ngIf="toggelFlagvfe">
          <ion-grid >
              <ion-row *ngFor="let eqpm of item.Eqpmnts" nowrap>
                  <ion-col>
                      <ion-label>{{eqpm.ID}} </ion-label>
                      <ion-label>{{eqpm.CreatedBy}} </ion-label>
                  </ion-col>
              </ion-row>
          </ion-grid>
      </div>
  </ion-row>

Upvotes: 0

Views: 2793

Answers (1)

G1N
G1N

Reputation: 384

You're using a single boolean to control the toggling for all the elements in gDatas. So whenever toggelFlagve is set to true, the *ngIf in your template will evaluate to true for all members of the *ngFor loop.

Instead, what you can do is have a "toggle" boolean key for each member of gDatas that is changed to true when you click the button element:

//your component template
<ion-row *ngFor="let item of gDatas; index as i">
    <ion-col col-1>
         <button (click)="toggleSection(i)" detail-none
                 [ngClass]="{'section-active1': item.toggle, 'section1': !item.toggle}">
             <ion-icon item-left name="arrow-dropright" *ngIf="!item.toggle"></ion-icon>
             <ion-icon item-left name="arrow-dropdown" *ngIf="item.toggle"></ion-icon>
         </button>
    </ion-col>
    <!-- other stuff is the same -->
    <div *ngIf="item.toggle">
        <!-- contents are the same here -->
    </div>
</ion-row>

//your component.ts
export class VentClass {

    gDatas: any[];

    constructor() {
        this.gDatas = [{toggle: false,"ID":"85","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"},{"ID":"10","CreatedBy":"jmzw"}]},{toggle: false,"ID":"86","Source":"Local","Eqpmnts":[{toggle: false,"ID":"10","CreatedBy":"jmzw"}]},{toggle: false,"ID":"87","Source":"EC","Eqpmnts":[]}]
    }

    toggleSection(item: number) {
        this.gDatas[item].toggle = !this.gDatas[item].toggle;
    }
}

So the big differences here are that toggleSection now takes the array index within gDatas to determine which element needs to be toggled, and then instead of using toggelFlagvfe in the HTML template you use item.toggle to determine whether each individual element is toggled or not.

Upvotes: 2

Related Questions