Search code examples
checkboxionic4ion-checkbox

How to get an array of multi checkbox on ionic4?


I'm trying to get an array with a multi checkbox on ionic 4, can someone help me?

        <ion-item>
          <ion-label position="floating">0</ion-label>
          <ion-checkbox  color="primary" value="0"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label position="floating">1</ion-label>
          <ion-checkbox color="secondary" value="1"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label position="floating">2</ion-label>
          <ion-checkbox color="danger" value="2"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label position="floating">3</ion-label>
          <ion-checkbox color="light" value="3"></ion-checkbox>
        </ion-item>


Solution

  • So you want to get an array from your .ts file to your html dynamically and load the content into the ion-items? Set a global variable into your .ts file. Lets call it data.

    Then your html should look like this: home.html:

    <ion-list *ngFor="let data-object of data">
        <ion-item>
          <ion-label position="floating">{{data-object.value}}</ion-label>
          <ion-checkbox color="secondary" value="{{data-object.value}}"></ion-checkbox>
        </ion-item>
    </ion-list>
    

    Where data is your array with data objects.