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>

Randy Casburn · Accepted Answer · 2019-01-18 02:22:54Z

4

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.

answered Jan 18, 2019 at 2:22

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scaraux Over a year ago

Whooo! Amazing!

Collectives™ on Stack Overflow

Angular increment variable in ng-for

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related