Filtering with ion select

@PalDevs wrote:

Hello,

I have the following HTML page:

<ion-header>
  <ion-toolbar>
    <ion-title>Page Title</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
  
</ion-header>

<ion-content>

  <ion-card>
    <ion-card-header>
      <ion-card-title style="font-size:20px">Trail Name 01</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="compass" slot="start"></ion-icon>
      <ion-label>Stage Information</ion-label>
      <ion-button fill="outline" slot="end">View Map</ion-button>
    </ion-item> 
    <ion-card-content>
      <p>Some sample text about the trail and its description.</p>
      <br>
      <p><ion-icon name="flag"></ion-icon> 17.0KM | <ion-icon name="stopwatch"></ion-icon> 5-7 Hours | <ion-icon name="pulse"></ion-icon> Moderate</p>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title style="font-size:20px">Trail Name 02</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="compass" slot="start"></ion-icon>
      <ion-label>Stage Information</ion-label>
      <ion-button fill="outline" slot="end">View Map</ion-button>
    </ion-item> 
    <ion-card-content>
      <p>Some sample text about the trail and its description.</p>
      <br>
      <p><ion-icon name="flag"></ion-icon> 14.7KM | <ion-icon name="stopwatch"></ion-icon> 4-5 Hours | <ion-icon name="pulse"></ion-icon> Moderate</p>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title style="font-size:20px">Trail Name 02</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="compass" slot="start"></ion-icon>
      <ion-label>Stage Information</ion-label>
      <ion-button fill="outline" slot="end">View Map</ion-button>
    </ion-item> 
    <ion-card-content>
      <p>Some sample text about the trail and its description.</p>
      <br>
      <p><ion-icon name="flag"></ion-icon> 12.02KM | <ion-icon name="stopwatch"></ion-icon> 4-5 Hours | <ion-icon name="pulse"></ion-icon> Moderate</p>
    </ion-card-content>
  </ion-card>

  
</ion-content>

And I am trying to do something similar to this: https://stackblitz.com/edit/ionic-tkqzr6
I tried to use the .TS that can be found there, but I keep having problems, I think we have version problems. Below is my package:

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "-": "0.0.1",
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/core": "2.0.2",
    "@ionic-native/core": "^5.24.0",
    "@ionic-native/geolocation": "^5.24.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-googlemaps": "^2.7.1",
    "core-js": "^2.5.4",
    "firebase": "^7.14.2",
    "mapbox-gl": "^1.10.0",
    "rxjs": "^6.5.5",
    "save": "^2.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@capacitor/cli": "2.0.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/mapbox-gl": "^1.9.1",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-googlemaps": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

My .TS is still at the default values:

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

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

  constructor() { }

  ngOnInit() {
  }

}

If you look at the example above, I would like to have three filter lines with multiple select. Because in my case, I am going to do a trail, so I have distance, time, and difficulty, and they need to be filtered.

Any idea how can I achieve this? I am new to this, and I am still learning!

Thanks!

Posts: 1

Participants: 1

Read full topic