Menu icon Foundation
Foundation Sticky element in Angular2

I'm 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:

 enter image description here

 

And here if I navigate to the page:

enter image description here

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?

 

angular2sticky. foundationangular

I'm 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:

 enter image description here

 

And here if I navigate to the page:

enter image description here

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?

 

DaraCodes about 2 years ago

Hi Koch,

 

I am facing the same issue with foundation6 with angular2 for reveal modals. On full refresh it works fine but after navigation it did not work. At one place my grid dont show without refresh and at another place my radio buttons does not work properly.

Brian Weiss about 2 years ago

Are you destroying your elements properly in the ngOnDestroy method when the Angular2 destroys the Component?

Maximilian Koch about 2 years ago

I could solve my problem with this: http://stackoverflow.com/questions/43098821/foundation-6-sticky-element-in-angular2