Angular2 two-way binding with Semantic ui Slider checkbox

Question

I have created Semantic UI slider checkbox dynamically by using JSON Schema in Angular2. I tested Angular2 two-way binding with input box its working fine.but with slider checkbox, it's giving me an error

Cannot read property 'Value' of undefined

This is my component.html here I'm using two type of slider checkbox one is input type has radio and another one is input type has the checkbox.

<div *ngFor="let t of arrayTypeArray; let i=index;">
<label>{{LabelToDisplay[i][0]}}</label>
<div *ngFor="let typeLiteral of sementicClass[i];let j=index;" (change)="disp();">
     <div class="ui form"  *ngIf="typeLiteral === 'base' ">
        <div class="grouped fields">   
            <div class="field">
                <div class="ui slider checkbox">
                    <input type="radio" name="throughput" checked="checked" [(ngModel)]="infoData[arrayLabelArrayKeys[i][j]]['Value']"> <!-- error-->
                    <label>{{LabelToDisplay2[i][j]}}</label>
                </div>
            </div>
        </div>
     </div>

    <div class="field" *ngIf="typeLiteral === 'alpha' ">    
        <div class="ui slider checkbox">  
        <input type="checkbox" name="newsletter">
        <label>{{LabelToDisplay2[i][j]}}</label>
        </div>
    </div>
</div>

can Anyone help me how to use two-way binding with semantic ui slider checkbox?

Thanks in advance.

Answer 1

Using ngModel you can.

 <div *ngIf="data === 'boolean'">
      <label for="{{labels[i]}}">{{labels[i]}}</label>
      <input type="checkbox" class="checkbox-inline" (change)="getJSON()" [(ngModel)]="model[labels[i]]" name="{{labels[i]}}">
 </div>