Angular 5 – Custom filters in data tables with firestore

Hi Friends,

Hope you are all well. This is part 3 of my Material Data tables with Angular 5 and Firestore series. Part 1 and Part 2 can be found here and here. In this post let’s see how to filter data in our data tables.

I presume you already have a copy of the code we have done so far. If not, you could grab it from here.

Let’s begin.

Code for this post is available – here.

Now setting custom filters is pretty much easy on a data table. A data table takes input from an observable through the dataSource attribute. If you query for data based on specific criteria and pass the resultant observable as the dataSource input then voila, you get the datatable with only the values specific to the filters you set.

Now in our code open up app.component.html and add a couple of select fields that will enable us to specify some criteria.

<!--The content below is only a placeholder and can be replaced.-->
<div>
<mat-form-field>
  <input matInput placeholder="Name" [(ngModel)]="studentDetails.studentName">
</mat-form-field>
<mat-form-field>
  <input matInput placeholder="Age" [(ngModel)]="studentDetails.studentAge">
</mat-form-field>
<mat-form-field>
  <input matInput placeholder="Grade" [(ngModel)]="studentDetails.studentGrade">
</mat-form-field>
<button mat-raised-button (click)="addStudent()" color="primary">Add</button>
</div>
<div>
  <mat-form-field>
  <mat-select [(value)]="filter.field">
    <mat-option>None</mat-option>
    <mat-option value="studentAge">Age</mat-option>
    <mat-option value="studentGrade">Grade</mat-option>
  </mat-select>
</mat-form-field>
  <mat-form-field>
  <mat-select [(value)]="filter.criteria">
    <mat-option value=">" *ngIf="filter.field == 'studentAge'">Greater than</mat-option>
    <mat-option value="<" *ngIf="filter.field == 'studentAge'">Lesser than</mat-option>
    <mat-option value="==">Equals</mat-option>
  </mat-select>
</mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Value" [(ngModel)]="filter.filtervalue">
</mat-form-field>
<button mat-raised-button (click)="filterData()" color="primary">Filter now</button>
<button mat-raised-button (click)="resetFilters()" color="primary">Reset Filters</button>
</div>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort>

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->


    <!-- Name Column -->
    
    <ng-container matColumnDef="Name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.studentName}} </mat-cell>
    </ng-container>

    <!-- Age Column -->
    <ng-container matColumnDef="Age">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Age </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.studentAge}} </mat-cell>
    </ng-container>

    <!-- Grade Column -->
    <ng-container matColumnDef="Grade">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Grade </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.studentGrade}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

<div>

<mat-form-field>

</mat-form-field>

<mat-form-field>

</mat-form-field>

<mat-form-field>

</mat-form-field>

</div>

<div>

<mat-form-field>

<mat-select [(value)]="filter.field">

<mat-option>None</mat-option>

<mat-option value="studentAge">Age</mat-option>

<mat-option value="studentGrade">Grade</mat-option>

</mat-select>

</mat-form-field>

<mat-form-field>

<mat-select [(value)]="filter.criteria">

<mat-option value=">" *ngIf="filter.field == 'studentAge'">Greater than</mat-option>

<mat-option value="<" *ngIf="filter.field == 'studentAge'">Lesser than</mat-option>

<mat-option value="==">Equals</mat-option>

</mat-select>

</mat-form-field>

<mat-form-field>

</mat-form-field>

<button mat-raised-button (click)="filterData()" color="primary">Filter now</button>

<button mat-raised-button (click)="resetFilters()" color="primary">Reset Filters</button>

</div>

<mat-table #table [dataSource]="dataSource" matSort>

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<ng-container matColumnDef="Name">

<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>

<mat-cell *matCellDef="let element"> {{element.studentName}} </mat-cell>

</ng-container>

<ng-container matColumnDef="Age">

<mat-header-cell *matHeaderCellDef mat-sort-header> Age </mat-header-cell>

<mat-cell *matCellDef="let element"> {{element.studentAge}} </mat-cell>

</ng-container>

<ng-container matColumnDef="Grade">

<mat-header-cell *matHeaderCellDef mat-sort-header> Grade </mat-header-cell>

<mat-cell *matCellDef="let element"> {{element.studentGrade}} </mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

</div>

Note that I have added one extra input field for specifying a value which will serve as the boundary for filtering and a couple of buttons; one for setting filters and the other for clearing them.

Don’t forget to add the MatSelectModule import in app.module.ts file.

Now open up app.component.ts file and modify the code as shown below.

import { Component, ViewChild, OnInit } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

//Angular Material 2
import { MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';

//Services
import { StudentService } from './student.service';

//rxjs
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild(MatSort) sort: MatSort;

  studentDetails = {
    studentName: '',
    studentAge: '',
    studentGrade: ''
  }

  filter = {
    field: 'studentAge',
    criteria: '',
    filtervalue: ''
  };
  displayedColumns = ['Name', 'Age', 'Grade'];
  studentDatabase = new studentDatabase(this.student);
  dataSource;

  constructor(private student: StudentService, private afs: AngularFirestore) {

  }

  ngOnInit() {
    this.dataSource = new StudentDataSource(this.studentDatabase, this.sort);
  }

  addStudent() {
    this.student.addStudent(this.studentDetails);
  }

  filterData() {
    this.student.filterData(this.filter).then((res: any) => {
      this.dataSource = new FilteredDataSource(res);
    })
  }

  resetFilters() {
    this.dataSource = new StudentDataSource(this.studentDatabase, this.sort);
  }
}

export class studentDatabase {

  studentList = new BehaviorSubject([]);
  get data() { return this.studentList.value };

  constructor(private student: StudentService) {
    this.student.getStudents().subscribe((student) => {
      this.studentList.next(student);
    })
  }
}

export class StudentDataSource extends DataSource<any> {

  constructor(private studentDB: studentDatabase, private sort: MatSort) {
    super()
  }

  connect(): Observable<any> {
    const studentData = [
      this.studentDB.studentList,
      this.sort.sortChange
    ];

    return Observable.merge(...studentData).map(() => {
      return this.getSortedData();
    })
  }

  disconnect() {

  }

  getSortedData() {
    const data = this.studentDB.data.slice();
    if (!this.sort.active || this.sort.direction == '') { return data; }

    return data.sort((a, b) => {
      let propertyA: number | string = '';
      let propertyB: number | string = '';

      switch (this.sort.active) {
        case 'Name': [propertyA, propertyB] = [a.studentName, b.studentName]; break;
        case 'Age': [propertyA, propertyB] = [a.studentAge, b.studentAge]; break;
        case 'Grade': [propertyA, propertyB] = [a.studentGrade, b.studentGrade]; break;
      }

      let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
    });
  }
}

export class FilteredDataSource extends DataSource<any> {

  constructor(private inputobs) {
    super()
  }

  connect(): Observable<any> {
    return this.inputobs;
  }

  disconnect() {

  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

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

import { AngularFirestore } from 'angularfire2/firestore';

//Angular Material 2

import { MatSort } from '@angular/material';

import { DataSource } from '@angular/cdk/collections';

//Services

import { StudentService } from './student.service';

//rxjs

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Observable } from 'rxjs/Rx';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

@ViewChild(MatSort) sort: MatSort;

studentDetails = {

studentName: '',

studentAge: '',

studentGrade: ''

}

filter = {

field: 'studentAge',

criteria: '',

filtervalue: ''

};

displayedColumns = ['Name', 'Age', 'Grade'];

studentDatabase = new studentDatabase(this.student);

dataSource;

constructor(private student: StudentService, private afs: AngularFirestore) {

}

ngOnInit() {

this.dataSource = new StudentDataSource(this.studentDatabase, this.sort);

}

addStudent() {

this.student.addStudent(this.studentDetails);

}

filterData() {

this.student.filterData(this.filter).then((res: any) => {

this.dataSource = new FilteredDataSource(res);

})

}

resetFilters() {

this.dataSource = new StudentDataSource(this.studentDatabase, this.sort);

}

export class studentDatabase {

studentList = new BehaviorSubject([]);

get data() { return this.studentList.value };

constructor(private student: StudentService) {

this.student.getStudents().subscribe((student) => {

this.studentList.next(student);

})

}

export class StudentDataSource extends DataSource<any> {

constructor(private studentDB: studentDatabase, private sort: MatSort) {

super()

}

connect(): Observable<any> {

const studentData = [

this.studentDB.studentList,

this.sort.sortChange

];

return Observable.merge(...studentData).map(() => {

return this.getSortedData();

})

}

disconnect() {

}

getSortedData() {

const data = this.studentDB.data.slice();

if (!this.sort.active || this.sort.direction == '') { return data; }

return data.sort((a, b) => {

let propertyA: number | string = '';

let propertyB: number | string = '';

switch (this.sort.active) {

case 'Name': [propertyA, propertyB] = [a.studentName, b.studentName]; break;

case 'Age': [propertyA, propertyB] = [a.studentAge, b.studentAge]; break;

case 'Grade': [propertyA, propertyB] = [a.studentGrade, b.studentGrade]; break;

}

let valueA = isNaN(+propertyA) ? propertyA : +propertyA;

let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);

});

}

export class FilteredDataSource extends DataSource<any> {

constructor(private inputobs) {

super()

}

connect(): Observable<any> {

return this.inputobs;

}

disconnect() {

}

Though the code looks a bit lengthy, I have just added a couple of functions to set the filters and to reset the filters. That’s it. I have also added a new class called FilteredDataSource which will return an observable in the connect() method so that the datatable gets it’s input.

Now open up student.service.ts file and add the below code.

import { Injectable } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()
export class StudentService {

  constructor(private afs: AngularFirestore) { }

  addStudent(studentData) {
    this.afs.collection('students').add(studentData).then(() => {
      console.log('Done');
    })
  }

  getStudents() {
    return this.afs.collection('students').valueChanges();
  }

  filterData(customfilters) {
    return new Promise((resolve, reject) => {
      if (customfilters.criteria == '')
        reject();
      if (customfilters.filtervalue == '')
        reject();
      resolve(this.afs.collection('students', ref =>
        ref.where(customfilters.field, customfilters.criteria, customfilters.filtervalue)).valueChanges());
    })
  }
}

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

import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()

export class StudentService {

constructor(private afs: AngularFirestore) { }

addStudent(studentData) {

this.afs.collection('students').add(studentData).then(() => {

console.log('Done');

})

}

getStudents() {

return this.afs.collection('students').valueChanges();

}

filterData(customfilters) {

return new Promise((resolve, reject) => {

if (customfilters.criteria == '')

reject();

if (customfilters.filtervalue == '')

reject();

resolve(this.afs.collection('students', ref =>

ref.where(customfilters.field, customfilters.criteria, customfilters.filtervalue)).valueChanges());

})

}

I have just added a filterData() function. It queries for the rows based on the specified criteria in the collection and returns an observable.

ref.where(customfilters.field, customfilters.criteria, customfilters.filtervalue)).valueChanges());

1	ref.where(customfilters.field, customfilters.criteria, customfilters.filtervalue)).valueChanges());

This is the line that does all the querying for us. The customfilters object is sent from the app.component.ts file. As simple as that.

Now simply run the code and you could see our app in action..

That’s it guys. You could similarly create filters for whichever column you want. You could also chain where queries in firestore which means you could simply add more than one criteria in the same column.

Hope this helped you. If you found it helpful, kindly share it with someone and help them too.

Thanks for reading. Peace..

Follow me

Liked it? Take a second to support admin on Patreon!

Kostya Malikov

Thanks for article! Absolutly helpful!
An Karthik

Awesome article
Nicolas Contreras V

Hello, thanks for this post! Really helpfull for me

I’m having a problem retreiving data from firestore with the query option .where() . Data is coming empty every time I call .where( … ) option. Any idea if some updates have come to AngularFire2?

T-Pub :)

The Techies' pub

Angular 5 – Custom filters in data tables with firestore

Read previous post:

Angular 5 + Firestore – Sorting in data tables