Foundation 6 Sticky element in Angular2

This question creates one of my previous questions: ngOnDestroy and $ ('# element'). foundation ('destroy'); I am basically trying to make Essential Essentials work in my Angular2 app. Apart from the question that I cannot destroy the Foundation element using ngOnDestroy()

, I am struggling with the Sticky element at all. I have it:

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 it wrapperDiv

loads directly and has no condition in it ngIf

.

In my component, I use this in my ngAfterViewInit

:

component

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

      

When I do a full page reload on that particular view everything is super and it works! If I go to this view it doesn't work. It seems to be due to a full page reload.

At some point, I was creating a sticky element like this:

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

      

Which didn't affect the behavior, but I could print the object myStickyElement

.

In full page load mode, the object looks like this: enter image description here

And here's if I go to the page:

enter image description here

As you can see, the object myStickyElement

looks different. Something is missing. Has anyone encountered this problem before? Why is a full page reload so different?

0


source to share


1 answer


using this:

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

      

is the correct move, however for some reason the sticky plugin doesn't work. Plugin attaches data object zfPlugin

which has api to enable stickiness

this is how you do it:

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

      

I installed PLNKR here which shows it works: https://plnkr.co/edit/zPuXooHYsJHuOQUj6Rdd?p=preview

UPDATE 1



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

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

      

The sticky plugin waits for an event to fire load.zf.sticky

, this happens on static pages because the framework knows these elements are on the page. Since it is in an angular component, you need to trigger this event yourself.

I've updated 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 the html I addeddata-sticky-on="small"

+1


source







All Articles