Javascript stops working after page-redirection (ANGULAR)

Question

I'm using angular 6 to create a testimonial slider. It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work. Has anyone encountered a similar issue?

Is there a way to modify this function so it loads on page-view rather than page-load?

Thanks

JS Code:

function mfnSliderTestimonials(){   

    var pager = function( el, i ){
        var img = $( el.$slides[i] ).find('.single-photo-img').html();
        return '<a>'+ img +'</a>';
    };

    $('.testimonials_slider_ul').each(function(){

        var slider = $(this);

        slider.slick({
            cssEase         : 'ease-out',
            dots            : true,
            infinite        : true,         
            touchThreshold  : 10,
            speed           : 300,

            adaptiveHeight  : true,             
            appendDots      : slider.siblings( '.slider_pager' ),
            customPaging    : pager,

            autoplay        : window.mfn_sliders.testimonials ? true : false,
            autoplaySpeed   : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,

            slidesToShow    : 1,
            slidesToScroll  : 1
        });

    });
}

EDIT: WORKS All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:

declare function YOURFUNCTION(): any; @component......

ngOninit YOURFUNTION()

and obviously import * as $ from 'jquery'; was also necessary!

Thanks