Q:

Hiding one part of an ngFor in angular 5

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? 

A:

All cards share the same [hidden]=hidden .So when you set hidden to false, all the cards disapear.  
My recommandation would be smth like that :
<card *ngFor="let card of userCardList">
    ...
    <button (click)="removeCardFromUserList(card)">Remove</button>
</card>

removeCardFromUserList(card) {
    let index = userCardList.indexOf(card);
    userCardList.splice(index, 1);
}

That means that instead of having a list of cards and settings flags to say if they are hidden or visible, you can also have a list of visible cards.  If you delete an item from this list it will automatically disapear on the page.  If you had one  it will show.  So no [hidden] or *ngIf needed in the view code for the card element. 
So maybe keep your list with all the cards and have another list for the user. 
The other solution is to have smth like property.visible = false since you deal with property objects.  Just had an attribute in this object.  Maybe much simplier in your case.