Add angular 2+ setup example to the readme

[AsafAgranat]

Noticing that a new typings file was recently added and merged to the master, could someone kindly add Angular 2+ setup instructions, as a directive or otherwise?
I've tried to follow the setups that were suggested here, but I keep getting an error:

TypeError: stickybits is not a function at StickyBitsDirective.ngAfterContentInit

[yowainwright]

Hey @AsafAgranat, thanks for reaching out! Could you provide with a link or code sample or something? 😃

...An example like this would be much appreciated within the wiki!

[AsafAgranat]

@yowainwright, unfortunately I haven't yet managed to successfully implement StickyBits in the Angular 5 project I'm working on at the moment. Well, I haven't spent too much time trying it either. I've only tried with the 2 code suggestions posted at the link I've included in the OP, which kept yielding the above mentioned error. But then I saw that the typings Typescript was added, which should provide much way to an Angular integration. Hence my request above. Hopefully someone could provide a working example.

[yowainwright]

@AsafAgranat I meant: could share the code you're working with? Is it open source? 😊

[mearleycf]

Regardless of @AsafAgranat 's code, can you please post instructions for including stickybits in an angular 5 project?

[yowainwright]

@mearleycf Stickybits is not an Angular utility. It is a JavaScript utility. This means that it can be used in Angular but code is not written specifically for Angular.

That stated, a link can be added to an Angular demo if someone wants to share one. ~Thanks

[DanielRuf]

Exactly, just include / import / require and use it.

[AsafAgranat]

Here's the code for a working directive in an angular-cli project:

1. Install StickyBits with npm or yarn as usual

2. Add the following line to src/typings.d.ts:

declare module 'stickybits'

3. Create the directive stickybits.directive.ts (and include it in your module):

import { Directive, ElementRef } from '@angular/core';
import stickybits from 'stickybits';

@Directive({
  selector: '[sticky-bit]' // or whatever selector you fancy
})
export class StickybitsDirective {
  constructor(elementRef: ElementRef) {
    try {
      const x = stickybits(elementRef.nativeElement, {
        useStickyClasses: true
      });
      console.log('ok', x);
    } catch (e) {
      console.log('error!', e);
    }
  }
}

4. Use the directive on your elements:

<div>
    <h2 sticky-bit>This will get stuck!</h2>
    <p>...</p>
</div>

And an example on Stackblitz

[yowainwright]

@AsafAgranat THANK YOU! 🔥

I will add this to the Wiki and close this issue when I've done that.

[AsafAgranat]

This is a more exhaustive directive. It exposes props from Stickybits as inputs, and it destroys itself.

import { Directive, Input, Inject, PLATFORM_ID, SimpleChanges, ElementRef, AfterContentInit, OnChanges, OnDestroy } from "@angular/core";
import { isPlatformBrowser } from "@angular/common";
import stickybits from "stickybits";

@Directive({
    selector: "[stickybits]"
})
export class StickyBitsDirective implements AfterContentInit, OnChanges, OnDestroy {

    private instance: any = null;
    private verticalPosition: string; // 'top' (default) | 'bottom'

    // options
    private stuckClass: string = 'is-stuck';
    private stickyClass: string = 'is-sticky';
    private changeClass: string = 'is-sticky-change';
    private parentClass: string = 'is-sticky-parent'

    // Add/remove classes from element according to it's sticky state
    // this is expensive for the browser - better if can be avoided and remain 'false'
    @Input() useStickyClasses: boolean = false;
    // desired offset from the top of the viewport to which the element will stick
    @Input() stickyOffset: number = 0;
    // Stick the element to the bottom instead of top
    @Input() stickToBottom: boolean = false;

    constructor(
        private element: ElementRef,
        @Inject(PLATFORM_ID) private platformId: string
    ) { }

    ngAfterContentInit() {
        this.init();
    }
    
    ngOnChanges(changes: SimpleChanges) {
        let change = changes.stickybits;
        if (isPlatformBrowser(this.platformId) && change && !change.isFirstChange) {
            if (change.currentValue) {
                this.init();
            } else {
                this.destroy();
            }
        }
    }

    ngOnDestroy() {
        this.destroy();
    }

    private init() {
        this.destroy();
        let element = this.element.nativeElement as HTMLElement;
        if (element) {
            this.instance = stickybits(element, {
                useStickyClasses: this.useStickyClasses,
                stickyBitStickyOffset: this.stickyOffset,
                verticalPosition: this.getVerticalPosition(),
                stuckClass: this.stuckClass,
                stickyClass: this.stickyClass,
                stickyChangeClass: this.changeClass,
                parentClass: this.parentClass
            });
            console.log(this.instance);
        }
    }

    private destroy() {
        if (this.instance) {
            this.instance.cleanup();
            this.instance = null;
        }
    }

    private getVerticalPosition() {
        if (this.stickToBottom) {
            return 'bottom'
        } else {
            return 'top'
        }
    }
}

[yowainwright]

@AsafAgranat I will look this over more soon. I really appreciate your work!

Thanks for taking this initiative. Your contributions here will be very valuable to others.

[yowainwright]

@AsafAgranat add something to the wiki. Please update as you see fit. I will be adding something to the README very soon.

~Thanks again!