Angular Animations with *ngFor apply only to clicked values not to all elements

Question

I want to apply animation when click one particular div generated with *ngFor. Currently it applies to every div when clicks. How can I achieve this ?

   animations: [
trigger('changeDivSize', [
  state('initial', style({
    width: '30px',
    height: '30px',
    opacity: '0.5',
    margin: '10px'
  })),
  state('final', style({
    width: '32px',
    height: '32px',
    opacity: '1',
    margin: '10px'
  })),
  transition('initial<=>final', animate('200ms')),
  transition('final=>initial', animate('200ms'))
]),

]

  changeState() {
    this.currentState = this.currentState  === 'initial' ? 'final' : 'initial';
  }

    <div class="row">
      <div *ngFor="let group of groups" class="col-1">
      <div  (click)="changeState()" [@changeDivSize]=currentState  [ngStyle]="{'background-color': group.colorCode}"></div>
    </div>

score 2 · Answer 1 · edited Feb 05 '19 at 05:02

2

You can use the index of your elements with the *ngFor to have a separate currentState value for each element, so animation works on individual elements.

  <div *ngFor="let group of groups;let i = index" class="col-1">
    <div  (click)="changeState(i)" 
          [@changeDivSize]=group.currentState  
          [ngStyle]="{'background-color': group.colorCode}">
    </div>
  </div>

  public changeState(index: number): void {
      console.log(index)
      this.groups[index].currentState = 
          (this.groups[index].currentState  === 'initial') ? 'final' : 'initial';
  }

edited Feb 05 '19 at 05:02

Daniel

286
1
2
9

answered Feb 05 '19 at 04:49

Ininiv

1,325
7
12

`currentState` is local variable not an attribute of group in this case – Thilina Akalanka Feb 05 '19 at 05:06
1

Add it in the groups as property so the state will be different for every group `[{colorCode: 'red', currentState : 'initial'}, ...]` – Ininiv Feb 05 '19 at 05:13
But it's necessary to keep the state of every element of `groups` in some way – Daniel Feb 05 '19 at 05:14

score 1 · Accepted Answer · answered Feb 05 '19 at 05:17

 changeState(index) {
    this.currentState[index] = this.currentState[index]  === 'initial' ? 'final' : 'initial';
  }

Better Take array of currentState of each item of group as above.

Then use currentState[i] for individual element of groups.

<div class="row">
   <div *ngFor="let group of groups, index as i" class="col-1">
   <div  (click)="changeState(i)" [@changeDivSize]=currentState[i]  [ngStyle]="{'background-color': group.colorCode}"></div>
</div>

Hope this helps.

Angular Animations with *ngFor apply only to clicked values not to all elements

2 Answers2