How to activate ion toggle according to the id passed?

Question

I have number of posts and I have to activate the toggle on view only those clicked by the user. But when the button of one post is clicked each posts' button is active although it does not get updated to the database.

    <p class="font">
           <strong>Space Type:&nbsp;</strong>{{ post.AvailableSpace.Space.SpaceTypeName }}
                <br> <strong>Address:&nbsp;</strong> {{ post.AvailableSpace.Address}}
                <br><strong>Price:&nbsp;</strong> {{ post.AvailableSpace.Price }} {{ post.AvailableSpace.PriceType.PriceTypeName}}
                <br><strong>No of available rooms:&nbsp;</strong> {{post.AvailableSpace.NoOfRooms}}
                <br>
    </p>

Answer 1

You should use *ngFor and ngClass for easy way of toggle something.

.ts file

  examples: any = [];
  toggleSection(i) {
    this.examples[i].open = !this.examples[i].open;
    }

.html file

<ion-list *ngFor="let item of examples; let i = index">
<ion-item  (click)="toggleSection(i)" [ngClass]="{'section-active': item.open}">
</ion-item>
<ion-card *ngIf="item.open"> Hello </ion-card>
</ion-list>