CODEWITHSUNDEEP
htmlionic3
Mohd Saif khan
Mohd Saif khan

Reputation: 65

How to create list using checkbox in Ionic 3

I am using Ionic 3 and I want to use checkbox for the user to select which exam he/she is preparing. But I am unable to create this layout (UI). My exam list is coming from api.

enter image description here

When a user select any of the box the background color will change. How can I achieve this?

Upvotes: 0

Views: 59

Answers (1)

Serdar Sayın
Serdar Sayın

Reputation: 399

Instead, you can use ion-segment component to change the UI of the current page with binding that button's value to background color.

As in docs you can manipulate like this for your sake. You can manipulate the UI according to your needs. Does that answer your question ?

 <div padding>
  <ion-segment [(ngModel)]="examType">
    <ion-segment-button value="CPO">
      CPO
    </ion-segment-button>
    <ion-segment-button value="CHSL">
      CHSL
    </ion-segment-button>
  </ion-segment>
</div>

<div [ngSwitch]="examType">
  <ion-list *ngSwitchCase="'CPO'">
   <div class="background-color-cpo"> </div>
  </ion-list>

  <ion-list *ngSwitchCase="'CHSL'">
    <div class="background-color-CHSL"> </div>
  </ion-list>
</div>

Upvotes: 3

Related Questions