ionic checkbox

1<!-- Default Checkbox -->
2<ion-checkbox></ion-checkbox>
3
4<!-- Disabled Checkbox -->
5<ion-checkbox disabled="true"></ion-checkbox>
6
7<!-- Checked Checkbox -->
8<ion-checkbox checked="true"></ion-checkbox>
9
10<!-- Checkbox Colors -->
11<ion-checkbox color="primary"></ion-checkbox>
12<ion-checkbox color="secondary"></ion-checkbox>
13<ion-checkbox color="danger"></ion-checkbox>
14<ion-checkbox color="light"></ion-checkbox>
15<ion-checkbox color="dark"></ion-checkbox>
16
17<!-- Checkboxes in a List -->
18<ion-list>
19  <ion-item *ngFor="let entry of form">
20    <ion-label>{{entry.val}}</ion-label>
21    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
22  </ion-item>
23</ion-list>
24
25import { Component } from '@angular/core';
26
27@Component({
28  selector: 'app-page-home',
29  templateUrl: 'home.page.html',
30  styleUrls: ['home.page.scss']
31})
32export class HomePage {
33  public form = [
34      { val: 'Pepperoni', isChecked: true },
35      { val: 'Sausage', isChecked: false },
36      { val: 'Mushroom', isChecked: false }
37    ];
38}