Angular increment variable in ng-for

Question

I am looping on a list of links with ng-for. Using a plugin called wowjs their icons are supposed to appear each one with a different duration. The first appears the fastest, the last one appears the latest.

In order to make this work, you need to set the data-wow-delay attribute to a duration in seconds. I.e "1.0s".

I created a variable dataWowDelay that I set to 1.0, and then I concatenate 's'. The issue is that I am trying to increment this variable after each loop of the ng-for but this does not work before of a parse error.

<ul class="social-list">
  <li *ngFor="let link of links">
    <a class="wow zoomIn" [attr.data-wow-delay]="dataWowDelay + 's'">
       <span></span>
    </a>
    {{ dataWowDelay = dataWowDelay + 0.1 }}
  </li>
</ul>

Answer 1

There is already an iterator index you can use for this very simply:

<ul class="social-list">
  <li *ngFor="let link of list; let idx = index">
    <a class="wow zoomIn" [attr.data-wow-delay]="idx * 0.01 + 's'">
    </a>
  </li>
</ul>

Note the use of the index here; simply use your multiplier and this will work fine.