checklist.html

<ion-header>
  <ion-toolbar color="success">
    <ion-title>
      {{ checklist?.title }}
    </ion-title>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/checklists"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="addItem()">
        <ion-icon slot="icon-only" name="add-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list lines="none">
    <!-- ### Function: Hiding/Showing -->
    <ion-item>
      <ion-label>Hide complete items</ion-label>
      <!-- Save the preference when any change is detected  -->
      <ion-toggle color="success" [(ngModel)]="hideComplete" (ionChange)="hideSwitch()"></ion-toggle>
    </ion-item>

    <!-- ### Function: Sorting -->
    <ion-item>
      <!-- Alphabet -->
      <ion-buttons>
        <!-- <button ion-button block (click)="addEvent();" [ngStyle]="{"background-color": buttonColor}">Add Event</button> -->
        <ion-button (click)="sortSwitchAlphabet()" [ngClass]=buttonAlphabet>
          <span>Sort: A-Z</span>
        </ion-button>
      </ion-buttons>
      <!-- Priority -->
      <ion-buttons>
        <ion-button (click)="sortSwitchPriority()" [ngClass]=buttonPriority>
          <span>Sort Priority</span>
        </ion-button>
      </ion-buttons>
    </ion-item>

    <!-- If hideCompplete is false, show all the items -->
    <section *ngIf="!hideComplete; else other">
      <ion-item-sliding *ngFor="let item of checklist?.items">
        <ion-item>
          <!-- Title -->
          <ion-label>{{ item.title }}</ion-label>
          <!-- Priority -->
          <ion-buttons class="priority">
            <ion-button (click)="setPriority(item)">
              <ion-icon slot="icon-only" name="list"></ion-icon>
              <ion-label>
                <span *ngIf="item.priority == 1">High</span>
                <span *ngIf="item.priority == 2">Medium</span>
                <span *ngIf="item.priority == 3">Low</span>
                <span *ngIf="item.priority == 4">No Priority</span>
              </ion-label>
            </ion-button>
          </ion-buttons>
          <!-- Checkbox -->
          <ion-checkbox [checked]="item.checked" (ionChange)="toggleItem(item)"></ion-checkbox>
        </ion-item>
        <ion-item-options>
          <ion-item-option tappable color="light" (click)="renameItem(item)"><ion-icon slot="icon-only" name="clipboard"></ion-icon></ion-item-option>
          <ion-item-option tappable color="danger" (click)="removeItem(item)"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </section>
    <!-- If hideCompplete is true, show items that are not checked as complete -->
    <ng-template #other>
      <ion-item-sliding *ngFor="let item of checklist?.items">
        <ion-item *ngIf="!item.checked">
          <!-- Title -->
          <ion-label>{{ item.title }}</ion-label>
          <!-- Priority -->
          <ion-buttons class="priority">
            <ion-button (click)="setPriority(item)">
              <ion-icon slot="icon-only" name="list"></ion-icon>
              <ion-label>
                <span *ngIf="item.priority == 1">High</span>
                <span *ngIf="item.priority == 2">Medium</span>
                <span *ngIf="item.priority == 3">Low</span>
                <span *ngIf="item.priority == 4">No Priority</span>
              </ion-label>
            </ion-button>
          </ion-buttons>
          <!-- Checkbox -->
          <ion-checkbox [checked]="item.checked" (ionChange)="toggleItem(item)"></ion-checkbox>
        </ion-item>
        <ion-item-options>
          <ion-item-option tappable color="light" (click)="renameItem(item)"><ion-icon slot="icon-only" name="clipboard"></ion-icon></ion-item-option>
          <ion-item-option tappable color="danger" (click)="removeItem(item)"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ng-template>
  </ion-list>
</ion-content>