CODEWITHSUNDEEP
angularngforangular-ng-if
iPaul
iPaul

Reputation: 433

ngFor how to bind each element separately

I am trying to build one dashboard in Angular 4. In that dashboard I have used *ngFor to iterate over a json (coming via service) and have displayed a series of reports inside cards. In each card there are some icons on the header and after clicking them some actions will be performed.. such as refresh, download, pop-up info inside tooltip, pin-unpin etc.

To do this I thought of using variables to bind those elements like (click)="function()", and also [@animationTag]="variable", as below:

...
<div class="card" *ngFor="let r of reportCards; let x of index">
    <div class="card-header">
        {{r.reportName}}
        <div class="close" aria-label="Close">
            <i class="fa fa-thumb-tack" aria-hidden="true" [@pinUnpin]="isPinned" (click)="unpinCard($event)"></i>
        </div>
    </div>
    <div *ngIf="!ifMinimized" class="card-body">
       {{r.reportMainDesc}}
    </div>
    <div *ngIf="!ifMinimized" class="card-footer">
       {{r.reportFooterDesc}}
    </div>
</div>
...

The corresponding animation code:

animations: [
trigger('pinUnpin', [
  state('pin', style({
      transform: 'rotate(0deg)',
  })),
  state('unpin', style({
      transform: 'rotate(90deg)',
  })),
  transition('pin => unpin', animate('300ms ease-in-out')),
  transition('unpin => pin', animate('300ms ease-in-out'))
]),
]

The corresponding function inside component:

unpinCard(pEvent) {
    this.ifMinimized = this.ifMinimized === true ? false : true;
    this.isPinned = this.isPinned === "pin" ? "unpin" : "pin";
}

The Issue:

All functions are working fine but the issue is whenever I am clicking one (pin) icon on a particular card.. the actions if performed upon all of the cards, means all cards are getting minimized together and also the (pin) icons of all cards are getting animated at same time.

I can guess that, this is due to the variables ifMinimized & ifPinned that are bound with all of the cards generated via ngFor.

Please help me to understand how can I bind individual elements so that if I click on one element's icon the action will be performed only on that item not to all elements which were generated by the ngFor.

Thanks in advance.

Upvotes: 1

Views: 802

Answers (1)

Carsten
Carsten

Reputation: 4208

Just pass the reportCard (r) to your unpinCard function and set ifMinimized and isPinned on that card: r['ifMinimized'] = !r['ifMinimized']

Or remove the function and simple type it in the html:

(click)="r.ifMinimized = !r.ifMinimized"
*ngIf="!r.ifMinimized"

Upvotes: 3

Related Questions