Foundation 6 Sticky element in Angular2

Question

This question build one of my earlier questions: ngOnDestroy and $('#element').foundation('destroy'); I'm basically trying to make Foundations Sticky work in my Angular2 application. Apart of the issue that I can't destroy the Foundation element, using ngOnDestroy(), I struggle with the Sticky element in general. What I have is this:

Component Template

<div id="wrapperDiv">
        <div class="columns medium-2 no-pad-left" data-sticky-container>
          <div id="myStickyElement" class="sticky" data-sticky data-top-anchor="wrapperDiv">
            <aside>
              <ul class="menu vertical">
                <li><a href="#elm1">Elm1</a></li>
                <li><a href="#eml2">Eml2</a></li>
                <li><a href="#eml3">Eml3</a></li>
                <li><a href="#eml4">Eml4</a></li>
              </ul>
            </aside>
          </div>
        </div>
</div>

It might be important to say that wrapperDiv is loaded directly and has no ngIf condition in it's parents.

In my component I use this in my ngAfterViewInit:

Component

  ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
  }

When I do a full page reload on this specific view, everything is super and works! If I navigate to this view, it it doesn't work. Seems to be related with the full page reload

On some point I was creating the Sticky element like this:

let myStickyElement = new Foundation.Sticky($('#myStickyElement'));

Which did not have any impact on the behaviour, but I could print out the object myStickyElement.

On full page reload the object looks like this:

And here if I navigate to the page:

As you can see, the object of myStickyElement looks way different. Something is missing. Has anyone come across this problem before? Why is the full page reload so much different?

Answer 1

using this:

ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
}

is the correct move, however, for some reason the sticky plugin is not working. The plugin attaches a data object zfPlugin that has an api to enable 'stickyness'

here is how you do it:

ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
    $('#myStickyElement').data("zfPlugin")._setSticky();
}

I set up a plnkr here that shows this working: https://plnkr.co/edit/zPuXooHYsJHuOQUj6Rdd?p=preview

UPDATE 1

After looking at the foundation code here: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js specifically this block:

$(window).one('load.zf.sticky', function(){
...
}

The sticky plugin is waiting for an event load.zf.sticky to be triggered, it happens in static pages because foundation knows those elements are on the page. Since it's in angular component, you have to trigger that event yourself.

I have updated the plunkr here: https://plnkr.co/edit/1P6oU5ZrdKHGlMeHYUUw?p=preview

here are the updates I made:

  ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
    $(window).trigger('load.zf.sticky');
  }

Note: in html I added data-sticky-on="small"