*ngFor with scrollspyitems and sections

herrKlein commented 6 years ago

I can't get generated items to work. It doesn't produce an error, bu none of the scrollspyitems comes active.

<ul class="nav" snScrollSpy id="foo">
  <li 
    *ngFor="let color of colors;let i = index"
    class="nav-item"><a snScrollSpyItem for="foo" class="nav-link" [attr.href]="'#section' + i" [href]="'#section' + i">{{color}}</a></li>
</ul>

<sn-scroll-spy-section
  *ngFor="let color of colors;let i = index"
  [attr.id]="'#section' + i" [id]="'#section' + i" for="foo" >
  <section class="section">{{color}}</section>
</sn-scroll-spy-section>

with this as a property in the component class :

colors: Array<string> = ['#ffffe0', '#f2f6df', '#e9edd8', '#e5e3cd', '#e5d8be', '#e8cdad', '#ecc09d', '#f1b28d', '#f5a480', '#fa9378', '#fd8374', '#ff7175', '#ff5d7b', '#ff4484', '#ff1493'];

It probably has something to do with setting the href or id dynamicly.

herrKlein commented 6 years ago

Almost got it. I had an error with assigning the id, it contains a # has sign. But I can't click the anchors to jump to the corresponding section.

<ul class="nav" snScrollSpy id="foo">
  <li 
    *ngFor="let color of colors;let i = index"
    class="nav-item"><a snScrollSpyItem for="foo" class="nav-link" [href]="'#section' + i">{{color}}</a></li>
</ul>

<sn-scroll-spy-section
  *ngFor="let color of colors;let i = index"
  [id]="'section' + i" for="foo" >
  <section class="section">{{color}}</section>
</sn-scroll-spy-section>

edoparearyee commented 6 years ago

Hi @herrKlein, glad you were able to get it working, unfortunately clicking to scroll to a section is not a feature of this library as of now. It could be something that we might look to add in the future though if someone submits a PR or issue for it.

In the meantime I would recommend using the browser's native scrollTo function combined with this polyfill for smooth scrolling.

thisissoon / angular-scrollspy

*ngFor with scrollspyitems and sections #6