Scroll doesn't work with ngFor

[doidd]

I following demo and simple edit code like this
<ul>
<li *ngFor="let num of [1,2,3,4,5,6,7,8,9,10]" [class.current]="id == 's'+ num " (click)="scrollTo('#s'+num, '#v-scrollable')">{{num}}
</ul>

scrolled to: {{id}}
<div id="v-scrollable" class="scrollable section" ng2-scrollable (elementVisible)="id = $event.id">
<div *ngFor="let num of [1,2,3,4,5,6,7,8,9,10]" [id]="'s'+ num ">
Section {{num}} (scroll to here)
</div>
</div>
but demo don't work. How can i fix that?

[allenhwkim]

It works for me.
https://plnkr.co/edit/6eyLtM?p=preview&open=app.component.ts

[Christophe-re]

It works because you don't use a ngfor.. :

app.tpl.html

<legend>Scroll Within Window</legend>
<div class="scrollable" 
  (elementVisible)="wid = $event.id"
  (elementHidden)="whid = $event.id"
  ng2-scrollable>
  **<div id="w1">One</div>
  <div id="w2">Two</div>
  <div id="w3">Three</div>
  <div id="w4">Four</div>
  <div id="w5">Five</div>
  <div id="w6">Six</div>
  <div id="w7">Seven</div>
  <div id="w8">Eight</div>
  <div id="w9">Nine</div>**
</div>
<div style="height: 1600px"> Spacing </div>

[allenhwkim]

I am not sure people really do repeat *ngFor for sections. We may need setTimeout() to solve this within ngAfterViewInit https://github.com/ng2-ui/scrollable/blob/master/src/scrollable.directive.ts#L40