I have a series of cards created using an ngFor loop in angular 5. I have added a button to the bottom to hide the card on click. The problem is that it hides all the cards not just the selected one. This is my click event: 

```
 removeUserLikedProperty(property_id: string) {
    this._user.removeUserLikedProperty(property_id);
    this.hidden = !this.hidden;
    console.log(property_id)
  }

```

And this is where I try to hide it: 

```
 <button class="button button-previous" (click)="removeUserLikedProperty(property?.property_id)">unlike</button>

```

and the for loop with the [hidden] biding: 

```
     <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">&pound;{{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>

```

As mentioned, this hides all the cards instead of the clicked one. Anyone have any idea why? and how to change it?