My ngFor loop in Angular 5 generates a series of cards. Each card has a button that, when clicked, should hide only that specific card. However, the issue is that clicking on one button hides all the cards. Here is the click event handling function:
removeUserLikedProperty(property_id: string) {
this._user.removeUserLikedProperty(property_id);
this.hidden = !this.hidden;
console.log(property_id)
}
Here is the button used to trigger the hiding functionality:
<button class="button button-previous" (click)="removeUserLikedProperty(property?.property_id)">unlike</button>
And here is the for loop with the [hidden] attribute binding:
<section *ngIf="properties; else noItems">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" *ngFor="let property of properties" >
<div class="card" [hidden]="hidden">
<div class="card_header" [routerLink]="['../../' + routes.Tenant.rent_property, property?.property_id]">
<img src="{{property?.property_photos[0].image_url}}" class="image no-buttons property-card__carousel"
*ngIf="property?.property_photos?.length; else noImageUploaded">
<ng-template #noImageUploaded>
<img src="/assets/img/icons/camera.png" alt="" style="height: 250px; width: 100%; padding: 25px">
</ng-template>
</div>
<div class="about">
<div class="row">
<div class="col-md-6">
<div class="property-type" *ngIf="property?.description">{{property?.bedrooms?.length}} Bed
{{property?.property_type}}
</div>
</div>
<div class="col-md-6 text-right">
<div class="icons" *ngIf="property?.bedrooms?.length > 0 || property?.bathrooms">
{{property?.bedrooms?.length}}<img
src="/assets/img/icons/Double-Bed/Double-Bed.png" alt="" class="icon_default icon">
{{property?.bathrooms}} <img
src="/assets/img/icons/En-Suite-Bathroom/En-Suite-Bathroom.png" alt="" class="icon_default icon">
</div>
</div>
</div>
<p class="address"> {{property?.street_number}}, {{property?.first_line_address}}
<br>
{{property?.city}},
{{property?.post_code}}
</p>
<div class="row">
<div class="col-md-6">
<p class="price">£{{property?.rent_pcm}} pcm <br>
<span class="bills" *ngIf="property?.is_bills_included">including bills</span>
<span class="bills" *ngIf="!property?.is_bills_included">including bills</span>
</p>
</div>
<div class="col-md-6 text-right">
<p class="address"> Listed</p>
<div class="date">{{property?.date_listed | date}}</div>
</div>
</div>
<hr>
<p class="featured" *ngIf="property?.feature_tags"> {{property?.feature_tags}}</p>
<button class="button button-previous" (click)="removeUserLikedProperty(property?.property_id)">unlike</button>
</div>
</div>
</div>
</div>
</div>
</section>
The problem persists where clicking on any button hides all cards instead of just the selected one. Does anyone have suggestions on how to fix this behavior?