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:
And here's if I go to the page:
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?
source to share
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"
source to share