0

I'm trying to use a jquery slider library in my Angular2 application. The problem is that I dynamically add new sliders and I must call a function to make the library display the slider correctly.

$( ".slider" ).each(function( index ) {
    $(this).slider();
    $(this).slider('setValue', $(this).attr("data-slider-value"))
});

For the moment I call it whenever a new element is added, but the problem is that I call it before Angular2 actually updates the html.

setTimeout(() => {
    $( ".slider" ).each(function( index ) {
        $(this).slider();
        $(this).slider('setValue', $(this).attr("data-slider-value"))
    });
}, 100);

But it's not very clean.

I'd like a way to call a function from the HTML when it is added to the page. Something like :

<slider (onLoad)="loadSlider()"></slider>

Is it possible in Angular2? Or is there a better way to do this?

SOLUTION

I got it working with Gilsdav answer.

form.component.html

<app-slider [min]="field.min" [max]="field.max" [value]="field.min"></app-slider>

slider.component.ts

import {Component, ViewChild, Input} from '@angular/core';

declare var $ : any;

@Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.css']
})
export class SliderComponent{
    @ViewChild('mySlider') slider: any; // can be ElementRef;
    @Input() min: number;
    @Input() max: number;
    @Input() value: number;

    constructor() { }

    ngAfterViewInit() {
        // slider is available
        $(this.slider.nativeElement).slider();
        let value = $(this.slider.nativeElement).attr("data-slider-value");
        $(this.slider.nativeElement).slider('setValue', value);
    }
}

slider.component.html

<input #mySlider
       class="slider"
       type="text"
       name="slider"
       data-provide="slider"
       data-slider-min="1"
       data-slider-max="3"
       [attr.data-slider-min]="min"
       [attr.data-slider-max]="max"
       data-slider-step="1"
       [attr.data-slider-value]="value"
       data-slider-tooltip="show"/>

But I have an error, which didn't occure when using Jquery. this.slider.slider is not a function

isherwood
  • 58,414
  • 16
  • 114
  • 157
Elbbard
  • 2,064
  • 6
  • 30
  • 53
  • [**Material2#slider**](https://material.angular.io/components/component/slider) doesn't work for you in this case? – developer033 Feb 17 '17 at 20:00
  • What kind of items are you using? Images? – yurzui Feb 17 '17 at 20:00
  • @developer033 I didn't want material design so I didn't try it. I tried ng2-slider-component but I couldn't make it work with angular-cli. – Elbbard Feb 17 '17 at 20:03
  • @yurzui I'm making an app to create forms. So my items are fields of a form. For example an input field, a slider field, a checkbox field... – Elbbard Feb 17 '17 at 20:04
  • 2
    Make your own "ng-slider" that implement AfterViewInit and use @ViewChild instead of getting element by class doesn't work ? Sorry I can't test for the moment. – Gilsdav Feb 17 '17 at 20:42
  • 1
    If you want use @Input() value, set it using [value]="field.value". And this.slider.attr("data-slider-value") will be replaced by this.value. – Gilsdav Feb 17 '17 at 21:47
  • That was a mistake, thank you! – Elbbard Feb 17 '17 at 21:57

1 Answers1

3

Make a new component with code that look like this:

@Component({
    selector: 'my-slider',
    template: '<slider #mySlider></slider>'
})
export class MySlider {
    @ViewChild('mySlider') slider: any; // can be ElementRef;

    ngAfterViewInit() {
        // slider is available
        this.slider.slider();
        let value = this.slider.attr("data-slider-value");
        this.slider.slider('setValue', value);
    }
}

Like I said in comment, I didn't test it but that's the good way for me.

You can find docs about lifecycle and child view here : http://learnangular2.com

Gilsdav
  • 1,147
  • 7
  • 10