Angular 2 Jquery Plugin - Issue when navigate away

Question

I am using the Seriously plugin to display html video onto a canvas element. This works fine for the first visit to the page but when you navigate back the videos all disappear. there is no console errors at all

            import {Component, ViewChild, ElementRef, OnInit, } from '@angular/core';
            import {Observable} from 'rxjs/Observable';
            import {RouteTree, CanDeactivate, ROUTER_DIRECTIVES } from '@angular/router';

            declare let jQuery: any;
            declare let Seriously: any;
            declare let seriously: any;
            declare let thevideo: any;
            declare let target: any;
            declare let thevideoB: any;
            declare let targetB: any;
            declare let seriouslyB: any;


            @Component({
                selector: 'home', 
                templateUrl: './app/components/Homepage/list/index.html',
                directives: [ROUTER_DIRECTIVES]
            })

            export class HomepageListComponent implements OnInit {



                    ngOnInit() {

                        let seriously, thevideo, target, thevideoB, targetB, seriouslyB;
                        let container = jQuery('#masonry');

                        seriously      = new Seriously();
                        thevideo       = seriously.source('#video');
                        target         = seriously.target('#canvas');
                        target.source  = thevideo;
                        seriously.go();

                        seriouslyB     = new Seriously();
                        thevideoB      = seriouslyB.source('#videoB');
                        targetB        = seriouslyB.target('#canvasB');
                        targetB.source = thevideoB;
                        seriouslyB.go();


                    }
            }

Answer 1

This is a guess as this is probably something more related to the seriously Plugin but my guess is that you probably need to destruct the Seriously instance when you navigate away from the page... You can do this by possibly using the ngOnDestroy method:

        import {Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
        import {Observable} from 'rxjs/Observable';
        import {RouteTree, CanDeactivate, ROUTER_DIRECTIVES } from '@angular/router';

        declare let jQuery: any;
        declare let Seriously: any;
        declare let seriously: any;
        declare let thevideo: any;
        declare let target: any;
        declare let thevideoB: any;
        declare let targetB: any;
        declare let seriouslyB: any;


        @Component({
            selector: 'home', 
            templateUrl: './app/components/Homepage/list/index.html',
            directives: [ROUTER_DIRECTIVES]
        })

        export class HomepageListComponent implements OnInit, OnDestroy {
                seriously:any;
                seriouslyB:any;

                ngOnInit() {

                    let thevideo, target, thevideoB, targetB;
                    let container = jQuery('#masonry');

                    this.seriously      = new Seriously();
                    thevideo       = this.seriously.source('#video');
                    target         = this.seriously.target('#canvas');
                    target.source  = thevideo;
                    this.seriously.go();

                    this.seriouslyB     = new Seriously();
                    thevideoB      = this.seriouslyB.source('#videoB');
                    targetB        = this.seriouslyB.target('#canvasB');
                    targetB.source = thevideoB;
                    this.seriouslyB.go();


                }

                ngOnDestroy() {
                    if(this.seriously) this.seriously = null;
                    if(this.seriouslyB) this.seriouslyB = null;
                    // Or check the document for something in seriously that will handle the destruction for you like
                    //seriously.kill()
                }
        }

Also change your seriously and seriouslyB variables from let to class variables so you can expose them to public methods within the class. Hope this might help.