Angular 4 Bind Multiple Component Inside ngFor

Question

I'm using DevExtreme Range Slider and I want to iterate through my columns array to create range sliders dynamically.

I'm following the example here : DevExtreme Range Slider Angular Demo

I don't know how to bind each range slider to its start & end value text boxes.

component.html

<ng-template ngFor let-column [ngForOf]="columns" let-i = index;>

<div class="dx-fieldset" *ngIf="column.is_integer" >
    <div class="dx-field">
        <div class="dx-field-label">{{column.name}}</div>
        <div class="dx-field-value">
            <dx-range-slider 
                #rangeSlider
                [min]="column.min" 
                [max]="column.max"
                [start]="column.min" 
                [end]="column.max"
                [rtlEnabled]="false"
                [tooltip]="tooltip"
                (onValueChanged)="quick_filter($event, column.name)"
            ></dx-range-slider>
            <dx-number-box 
                [min]="column.min"
                [max]="column.max" 
                [(value)]="rangeSlider.min"
                [showSpinButtons]="true" 
                name="{{column.name}}_start"
            ></dx-number-box>
            <dx-number-box 
                [min]="column.min"
                [max]="column.max" 
                [(value)]="rangeSlider.max"
                [showSpinButtons]="true" 
                name="{{column.name}}_end"
            ></dx-number-box>
        </div>
    </div>
</div>


</ng-template>

How to change the #rangeSlider to each column.name inside the ngFor and bind it to the start & end value text boxes?

Answer 1

min and max - options of dxRangeSlider, specifiing a border values.

start and end - options of dxRangeSlider, specifiing a left and right value of the selected interval (handle positions).

Bindings will be the same, like in the example:

<div class="dx-fieldset" *ngFor="let column of columns" >
    <div class="dx-field">
          <div class="dx-field-label">{{column.name}}</div>
          <div class="dx-field-value">
              <dx-range-slider 
                  #rangeSlider
                  [min]="0" 
                  [max]="100"
                  [start]="column.start" 
                  [end]="column.end"
              ></dx-range-slider>
              <dx-number-box 
                  [min]="0"
                  [max]="100" 
                  [(value)]="rangeSlider.start"
                  [showSpinButtons]="true" 
              ></dx-number-box>
              <dx-number-box
                  [min]="0"
                  [max]="100"
                  [(value)]="rangeSlider.end"
                  [showSpinButtons]="true" 
              ></dx-number-box>
          </div>
      </div>
</div>

Also, I prepared a working sample on Plunker with the ngFor directive.