CODEWITHSUNDEEP
angularfullpage.js
Rakesh Sonu
Rakesh Sonu

Reputation: 1

Collabarating angular2 with fullpagejs, need to load fullpage js after binding data from anular

So i am trying to use fullpage js features in angular2. There are few sections rendered through template binding, which is happening after loading fullpagejs.

My issue is there are 4 main sections in my page and 1 of them hav 3 child sections which are generated through json data(template binding). For example "servicesSection" is one of the child section generated through template binding, so when I enter "http://localhost:3000/#servicesAnchor3" in url, its not auto scrolling to that particular section since fullpage js doesnt know that slide, because it is being binded after fullpage js loaded.

I appreciate if anyone could help me out solving this issue, i am scratching my head from weeks, fed up finding solution.

Is there a way that we could reload fullpage js after loading all the slides, that would fix my issue.

Upvotes: 0

Views: 220

Answers (1)

Ben Richards
Ben Richards

Reputation: 3575

You need to initialize your full page with the sections, once they are loaded. So after the section (or the angular app) is loaded, add something like this to the component:

$('#fullpage').fullpage({
  anchors:['firstPage', 'secondPage', 'thirdPage']
});

BUT...this uses jQuery to find the element and create the sections.

So instead use the Angular2 integration for the fullpage plugin. You can get it at https://github.com/meiblorn/ng2-fullpage. You can read about how to set it up and use it on their page.

Upvotes: 1

Related Questions