How can I show only the infos of the item when i tap with ngfor and ngif? (Nativescript/Angular)

Question

I want to have a accordion type List in my GridLayout with Nativescript. Everything works and the infos show, when i click on one item, but every g Label opens. How can i change the infos of the one itam i tapped open?

<ng-container *ngFor="let g of geraetegroessen; let i=index">
    <GridLayout rows="auto, auto">
        <Label row="0" text="{{g.geraetegroesse}}" class="geraetegroessen" (tap)="collapseInfo(g.geraetegroesseID)"></Label>
        <ng-template [ngIf]="showDetails">
            <Label row="1" text="Hello" class="geraetegroesseninfos"></Label>
        </ng-template>
    </GridLayout>
</ng-container>

In the code above you can see the XML and the ng-container.

Closed Labels

This is how it looks like, when i tap on one label

showDetails is false and if someone taps a label it changes the to true with the function:

collapseInfo(args) {
    console.log("Gerätegröße: " + args);
    this.showDetails = !this.showDetails;
}

I am struggling. Can someone help?

Answer 1

All items expand even though you only want the item you clicked on to expand. This is because the variable that holds the state (expanded, collapsed) is the same for all your items.

A possible approach here would be to persist the state for each individual item. Then, by clicking on an item, the state of that item could be changed. Since only the state of one item would be changed, the remaining items would remain collapsed. Each item in geraetegroessen would then have its own showDetails, and you could do something like this:

<ng-container *ngFor="let g of geraetegroessen; let i=index">
    <GridLayout rows="auto, auto">
        <Label row="0" text="{{g.geraetegroesse}}" class="geraetegroessen" (tap)="g.showDetails = !g.showDetails"></Label>
        <ng-template [ngIf]="g.showDetails">
            <Label row="1" text="Hello" class="geraetegroesseninfos"></Label>
        </ng-template>
    </GridLayout>
</ng-container>