How to assign Kendo Slider properties via object in Angular Application

Question

I am working on Angular 5 application along with Kendo UI. I need Kendo Slider which works fine with hard-coded properties but in my case I need to assign from object as data is coming dynamically.

what I found possibly conflicting is square bracket, as Kendo slider I strongly believe expecting to provide properties in [] bracket where I need to assign value from object to property, also require square bracket

MetaData

 let questions: QuestionBase<any>[] = [
      new SliderQuestion ({
        key: 'driving2',
        label: 'how likely you are going to buy new car next year?',
        order: 8,
        options: [
          {min: '0', max: '12', smallStep:'6', sliderOptions:[
                          { name:'likely', key: '1',  value: 'likely'},
                          { name:'Not likely', key: '2',  value: 'Not likely'},
                          { name:'Very likely', key: '3',   value: 'Very likely'}
              ]},
        ],
       })
 ]

template

 <div *ngSwitchCase="'range'">
      <div *ngFor="let opt of question.options" >                       
         <div class="slider-label" >
              <p *ngFor="let sub_opt of opt.sliderOptions" class="slider-options">{{sub_opt.value}}</p>
         </div>                  
             <kendo-slider [min]="0" [max]="12" [smallStep]="6"></kendo-slider> // This works
             <kendo-slider [min]="opt.min" [max]="opt.max" [smallStep]="opt.smallStep"></kendo-slider> // this doesn't work, need help here
            </div>   
      </div>

score 1 · Answer 1 · answered Mar 12 '18 at 09:34

The problem is the type of the property:

When you are assigning the value like this [min]="0" the data-type is number. But when you get the data from your MetaData-object [min]="opt.min" the data-type is string (based on the example provided).

But the kendo-slider expects numeric values as input for min, max and smallStep. (API Reference)

If you provide numeric-values in your MetaData object, or convert them before assigning them it'll work just fine. (Example)

score 0 · Answer 2 · answered Mar 21 '18 at 14:56

problem as philipp identified need to assign int rather then string, so

<kendo-slider [min]="opt.min" [max]="opt.max" [smallStep]="opt.smallStep"></kendo-slider> 

 options: [
      {min: parseInt("0"), max: parseInt("12"), smallStep:parseInt("6"), sliderOptions:[
           { name:'likely', key: '1',  value: 'likely'},
           { name:'Not likely', key: '2',  value: 'Not likely'},
           { name:'Very likely', key: '3',   value: 'Very likely'},
         ]},
    ],

How to assign Kendo Slider properties via object in Angular Application

MetaData

template

2 Answers2