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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!--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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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.
|
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..
