How to create list using checkbox in Ionic 3

Question

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.

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

Serdar Sayın · Accepted Answer · 2019-11-12 18:41:01Z

3

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>

answered Nov 12, 2019 at 18:41

Serdar Sayın

3994 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohd Saif khan Over a year ago

The above image has only 8 exam list but i have almost 25-30 exam list.So how many ion-segment button will i use.I think it will become complicated.

Collectives™ on Stack Overflow

How to create list using checkbox in Ionic 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related