Angular filter ion-list using ion-select

@TomTruyen wrote:

Hello I’m quite new to ionic (& angular framework) and I’m currently using the latest version.
I’m working on a fitness app on which I currently have a list of exercises which I want to filter by ‘category’
Now I have setup the list and build the list using *ngFor=… though I want to ‘rebuild’ that list depending on what the user selects in the select box.

Each exercise is build using the following format:

{
      id: 'ex109',
      title: 'Knees to Elbows',
      category: 'Core',
      imageUrl: '../../assets/myAssets/kneestoelbows.png',
      advancedImageUrl: '../../assets/myAssets/kneestoelbows-detail.jpg',
      instructions: [
        '1. Grasp the pull up bar with a shoulder width grip. You can perform this movement with your palms facing away from your or towards you. This is your starting position.',
        '2. From the hanging position, bringing both of your knees up so they make contact with your elbows.',
        '3. Lower yourself down to the starting position.',
        '4. Repeat for reps.',
      ],
    },

In turn these exercises are stored in array called ‘exercises’

Now I have setup a select with all categories of the exercises though I have no idea on how to change the current ion-list when changing the select. I know there is a event on the select called ionChange on which I could call a function and filter through my exercises array. But how would I go about rebuilding the list? Do I have to empty it first (innerHTML) and then rebuild it using a for/foreach loop on my exercises? Or is there an easier Angular way of doing it?

My current code (HTML):

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col>
        <ion-select value="All">
          <ion-select-option>All</ion-select-option>
          <ion-select-option>Arms</ion-select-option>
          <ion-select-option>Back</ion-select-option>
          <ion-select-option>Cardio</ion-select-option>
          <ion-select-option>Chest</ion-select-option>
          <ion-select-option>Core</ion-select-option>
          <ion-select-option>Full body</ion-select-option>
          <ion-select-option>Legs</ion-select-option>
          <ion-select-option>Olympic</ion-select-option>
          <ion-select-option>Shoulders</ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col> </ion-col>
      <ion-col> </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item
            class="ion-no-padding"
            *ngFor="let exercise of exercises"
            [routerLink]="['./', exercise.id]"
            detail
          >
            <ion-avatar slot="start">
              <ion-img [src]="exercise.imageUrl"></ion-img>
            </ion-avatar>
            <ion-label>
              <h2>{{exercise.title}}</h2>
              <p>{{exercise.category}}</p>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

My typescript file:

import { Component, OnInit } from '@angular/core';

import { Exercise } from './exercises.model';
import { ExercisesService } from './exercises.service';

@Component({
  selector: 'app-exercises',
  templateUrl: './exercises.page.html',
  styleUrls: ['./exercises.page.scss'],
})
export class ExercisesPage implements OnInit {
  exercises: Exercise[];

  constructor(private exerciseService: ExercisesService) {}

  ngOnInit() {
    this.exercises = this.exerciseService.getAllExercises();
  }
}

My typescript service file (functions as the file mostly contains the array of all my exercises)

getAllExercises() {
    return [...this.exercises];
  }

  getExercise(exerciseId: string) {
    return {
      ...this.exercises.find((exercise) => {
        return exercise.id === exerciseId;
      }),
    };
  }

Thanks in advance

Posts: 1

Participants: 1

Read full topic