Initializing fullpage.js multiple times in an angular app

Question

I am building an Angular app that uses fullpage.js in a few of its pages. Currently, I am initializing fullpage (e.g. $('#this-routes-fullpage').fullpage({ options... }) ) using a custom directive within the template for each route where it is getting used. At the end of each of these custom directives, I'm calling

scope.$on('$routeChangeStart', function() {
    $.fn.fullpage.destroy('all');
}

This works as I expect (the plugin is destroyed and reinitialized the next time it is encountered) when I am navigating from one page that utilizes the plugin, to another page that doesn't utilize it, and then back on to a third page that does utilize it. However, if that intermediate step is left out and I navigate directly from one route that utilizes fullpage to a second that also utilizes it, the plugin doesn't initialize properly. By which I mean that the controls won't work.

This makes me think that there is a better place for me to call the destroy function that will take proper advantage of Angular events. Can anyone help me out with this?? Thanks!

Answer 1

Update:

Now you can make use of the official Angular component for fullPage.js.

---

Just destroy it whenever and wherever you initialize it. Just before the initialization, for example:

//destroying
if (typeof $.fn.fullpage.destroy == 'function') { 
    $.fn.fullpage.destroy('all');
}

//initializing 
$('#fullpage').fullpage();

Or you can just check if it was initialized before checking the class/flag that fullPage.js adds to your html element (supposing this doesn't get modified in your ajax calls).

//destroying
if($('html').hasClass('fp-enabled')){
    $.fn.fullpage.destroy('all');
}

//initializing 
 $('#fullpage').fullpage();

Answer 2

For using the router:

If you're using the router in Angular 4, you can simply edit the mnFullpage.directive.js in the ngx-fullpage component directive. Add a boolean for "initialized" at the top and then do a simple if statement. If fullpage is initialized then destroy('all'). This way, when you use the router to go from page to page they will still retain the fullpage.js functionality.

1. Go to ngx-fullpage\components\fullpage\mnFullpage.directive.js
2. Scroll down to the ngOnInit function

3. Add this variable to the top of the page (under var DIRECTIVE_NAME)

   var initialized = false;

4. replace the bottom initializer with this:

   /**
    * Enable fullpage for the element
    */
   if(initialized)
   {
     $.fn.fullpage.destroy('all');
   }
   $(this._el.nativeElement).fullpage(this.options);
   initialized   = true;