Angular 4 Firebase Filter Data example with AngularFire2 v4

In this tutorial, we’re gonna create a simple Angular 4 App that displays list of data from Firebase Realtime Database with multi-property data filter using AngularFire2.

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase CRUD operations with AngularFire2 v4
Angular 4 Firebase Pagination example with AngularFire2 v4
Angular 4 Firebase AutoComplete Search example with AngularFire2 v4

I. Technology

– Angular 4
– AngularFire2 4.0

II. Overview

Assume that we have Firebase Database like this:
angular-4-firebase-data-filter-overview-db-console

We will build an Angular 4 App that can display list of data from Firebase Realtime Database with multi-property data filter:
angular-4-firebase-data-filter-overview

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

angular-4-firebase-integration-copy-firebase-project-config

2. Build Angular 4 App that can add & display list of data items

You can find how to do this in the post:
Angular 4 Firebase CRUD operations with AngularFire2 v4

angular-4-firebase-crud-goal

3. Support multi-property data filter
3.1 Lodash filter with conforms() method

We can filter objects by combining Lodash filter() and conforms() method:

conforms() method takes each object and evaluates it’s property value to true or false.

3.2 Service with AngularFireDatabase

3.3 Component for data filter

customers-list.component.ts

We apply filterGreaterThan() and filterBoolean() function to filter property age and active. Filter result will be store in filteredCustomers.

We also uses DoCheck to update filter list when interacting with item in the list.

customers-list.component.html

III. Source Code

Angular4Firebase-DataFilter


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*