How to perform Search/Filter list in ionic 4 firestore

Question

I've tried so many tutorials, but I can't find any solution on how to perform a search function.i would like to search in StudentList collection by a field called booth I would feel grateful if someone willing to help me. so this is basically my coding

firebase.service.ts

import { Injectable } from '@angular/core';

import { AngularFirestore, AngularFirestoreDocument,AngularFirestoreCollection, DocumentReference } from '@angular/fire/firestore';

import { AngularFireAuth } from '@angular/fire/auth';

import { Subscription, Observable } from 'rxjs';

import {map, take} from 'rxjs/operators';

import {studl} from '../modal/studl';

@Injectable({

  providedIn: 'root'

})

export class FirebaseService {

  private students: Observable<studl[]>;

  private studCollection: AngularFirestoreCollection<studl>;

  constructor(

     public afs: AngularFirestore,

    public afAuth: AngularFireAuth) {


      this.studCollection = this.afs.collection<studl>('StudentList');

      this.students = this.studCollection.snapshotChanges().pipe(

          map(actions => {

            return actions.map(a => {

              const data = a.payload.doc.data();

              const id = a.payload.doc.id;

              return { id, ...data };

            });

          })

      );

    }

    //getall

    getAllStud(): Observable<studl[]> {

      return this.students;

    }

    //getsingle

    getStudSingle(id: string): Observable<studl> {

      return this.studCollection.doc<studl>(id).valueChanges().pipe(

          take(1),

          map(note => {

            note.id = id;

            return note;

          })

      );

    }

    }
}

Home.html

<ion-content>

  <div class="title-block">

    <div class="heading"></div>

  </div>

  <ion-searchba></ion-searchbar >

  <ion-list>

    <ion-list-header>

      <ion-label>Select your student</ion-label>

    </ion-list-header>

    <ion-item *ngFor="let note of (students | async)">

      <ion-thumbnail slot="start">

        <img src="assets/icon/check.png">

      </ion-thumbnail>

      <ion-label>

        <h5>{{note.name}}</h5>

        <p>Matrix:{{note.matrix}}</p>

        <p>Booth:{{note.booth}}</p>

      </ion-label>



      <ion-button fill="outline" slot="end" [routerLink]="'/role/'+note.id">Evaluate</ion-button>

    </ion-item>

  </ion-list>
</ion-content>

Home.ts

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

import { AuthenticateService } from '../services/authentication.service';

import { LoadingController } from '@ionic/angular';

import { Router, ActivatedRoute, Params } from '@angular/router';

import { NavController, ModalController } from '@ionic/angular';

import { FirebaseService } from '../services/firebase.service'

import { AngularFirestore } from '@angular/fire/firestore';

import { FormControl } from '@angular/forms';

//import { debounceTime } from 'rxjs/operators';

import { studl } from '../modal/studl';

import { Observable } from 'rxjs';

@Component({

  selector: 'app-studlist',

  templateUrl: './studlist.page.html',

  styleUrls: ['./studlist.page.scss'],

})

export class StudlistPage implements OnInit {

  public students: Observable<studl[]>;

  constructor(

    public loadingCtrl: LoadingController,

    private authService: AuthenticateService,

    private fService: FirebaseService,

    private firestore: AngularFirestore,

    private router: Router,

    private route: ActivatedRoute,

    private navCtrl: NavController

  ) { }

  ngOnInit() {

    this.students = this.fService.getAllStud();

  }

Studl.modal.ts

export interface studl {

    id?: any;

    name: string;

    booth: string;

    matrix: string;

    cspmark:string;

    exmark:string;

    svmark:string;

}

Answer 1

Filter data from Firestore whit angularfire

There was a similar question and what you need is available an answered in the link above.If the answer didn't serve you well, then re-comment on the answer to solve it for you.