How to use Scrollspy & Affix in Angular 2

Question

I noticed that you cannot use in angular 2 components bootstrap feature like data-spy="affix"

Does anyone know how to use affix and scrollspy in angular 2? (Example)

Answer 1

You could write your small directive which would do the same thing. I'm sharing my code:

Directive:

@Directive({
 selector: '[scrollPoint]'
})
export class ScrollPointDirective {
   @Input() scrollPoint: number;
   constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer,
    private el: ElementRef
 ) { }

   @HostListener('window:scroll', [])
   onWindowScroll() {
      const windowScroll = this.document.body.scrollTop;
      if (windowScroll > this.scrollPoint) {
        //add class to the native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', true);
      } else {
        //remove class from native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', false);
      }

   }

 }

The @Input scrollPoint parameter can be passed from your HTML

HTML:

 <div [scrollPoint]="235">
    <ul class="nav-stacked">
       //your code
    </ul>
 </div>

Add CSS to the class added in the directive:

CSS

.sticky-nav {
  position: sticky;
  top: 90px;
  bottom: 0;
 }

I haven't been able to integrate affix to angular2 as well, but this did it for me. Hope it helps.