Position: sticky polyfill for angular 2

Question

Are there any polyfill available for angular 2 position:sticky. I have been able to find a few, but most of them are jquery based, there seem to be no implementation available for angular 2:

https://github.com/wilddeer/stickyfill

I need to know the sample usage with angular 2,

for Javascript it is as follows:

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

Answer 1

I added it as a directive on angular 1.4 and npm package "stickyfilljs":"^2.0.3"

import { Directive, ElementRef } from '@angular/core';
import * as Stickyfill from 'stickyfilljs';


@Directive({
  selector: '[StickyPolyfill]'
})
export class StickyPolyfillDirective {

  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    Stickyfill.addOne(this.elementRef.nativeElement);
  }
}

And in the component I have:

<div class="top-bar-container stickyMenu" StickyPolyfill>

Don't forget to include sticky in CSS:

  .stickyMenu {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;       
  }