CODEWITHSUNDEEP
javascriptangulartypescript
Jm3s
Jm3s

Reputation: 617

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?

Upvotes: 0

Views: 1415

Answers (2)

Bhimashankar Mantur
Bhimashankar Mantur

Reputation: 199

Instead of Splicing from the list, You can have following object structure initially

userCardList = [{
'visibility': true,...
}, {
'visibility': true,...
},...]

just hide the card on clicking the card by setting the 'visibility' property to false.

<card *ngFor="let card of userCardList" *ngIf="card.visiblity">
    ....
    <p class="featured" *ngIf="property?.feature_tags"> 
        {{property?.feature_tags}}
    </p>
    <button (click)="card.visiblity = false">
        Remove
    </button> 
</card>

Upvotes: 0

Julien
Julien

Reputation: 2756

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.

Upvotes: 1

Related Questions