How can I import javascript function in angular2 template

Question

I need slider and I use AdminLTE in my project

<input type="text" value="" class="slider form-control"
       data-slider-min="-200" data-slider-max="200"
       data-slider-step="5"  data-slider-orientation="horizontal"
       data-slider-selection="before" data-slider-tooltip="show"
       data-slider-id="yellow">

to convert input to div , it needs

<!-- Ion Slider -->
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
  $(function () {
    /* BOOTSTRAP SLIDER */
    $('.slider').slider();
});
</script>

first 2 I imported in index.html und last function in my tamplate after input it doesn't work Where and how can I input this function? I did it in index.html but it doesn't work

Answer 1

The Javascript you are trying to use is jQuery, if you are not using jQuery than that code will not work. You can tell it is jQuery because of the $.

If you are using jQuery in your AngularJs app than double check that

<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>

are actually loading.

Here is a "plain vanilla" Javascript implementation you can use in place of the jQuery implementation if you are not using jQuery:

<script>
    function initSlider() {
       var sliderInputElem = document.getElementsByClassName('slider');
       sliderInputElem.slider();
    }
    window.onload = initSlider;
</script>

By the way should be able to change

<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>

to

<script src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="/plugins/bootstrap-slider/bootstrap-slider.js"></script>

if plugins folder is at the root of your app. I try to avoid up directory ../ for any resource, because the paths are more fragile (become broken links do to some code reorganization in the future).

Answer 2

Angular compiler flushes out your JS code in the application.
To include any JS code, you need to include the definition filename.d.ts along with the JS and declare all the variables you are going to use in the JS code in filename.ts.

Answer 3

I guess you just need to cut you function from index.html and have to paste in the constructor of same HTML where you are going to use carousel.

let suppose you are using this in your app.component.html file

<input type="text" value="" class="slider form-control"
       data-slider-min="-200" data-slider-max="200"
       data-slider-step="5"  data-slider-orientation="horizontal"
       data-slider-selection="before" data-slider-tooltip="show"
       data-slider-id="yellow">

then you need to use this function in app.component.ts like this

declare var $: any;
@component({
....
})
export class AppComponent{
constructor(){
    /* BOOTSTRAP SLIDER */
    $('.slider').slider();
}
........
}