Binding a Firebase Data Source to Grid Using AngularFire2 | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Binding Firebase Data Source to EJ2 Grid using AngularFire2

Binding a Firebase Data Source to Grid Using AngularFire2

Learning and sharing are the best ways to gain expertise in any field. With this in mind, I am going to share one of the features that I learned how to use at the NG-Conf Hardwired, an online Angular conference. This conference was very well organized and was quite successful. I fully enjoyed the three days of the event with so many interesting discussions on Angular 9 and 9.1 features.

At the event, the Angular core team presented over 30 topics. In this blog, though, I want to focus on walking you through the details of one of the most interesting, the Angular Firebase feature, and how to use it with Syncfusion’s JS 2 DataGrid.


Firebase is a Google product and it is a real-time NoSQL cloud database. It helps in building apps without the backend. So, you can save and retrieve JSON objects, build user authentication, and get data updates in real-time across connected devices in milliseconds. The data will remain available even if the app goes offline, providing a great user experience regardless of network connectivity.


AngularFire is the official Angular library for Firebase. This library combines the power of Angular, Firebase, and RxJS to act as the serverless backend. It includes modules for the Realtime Database and Firebase Authentication, and Cloud Firestore has recently been added to the list.

AngularFire provides connections to the following Firebase services:

  • Observable base: Uses the power of RxJS, Angular, and Firebase.
  • Realtime bindings: Synchronizes data in real time.
  • Authentication: Logs users in with a variety of providers and monitors authentication state.
  • Offline data: Stores data offline automatically with AngularFirestore.
  • Server-side render: Generates static HTML to boost perceived performance.
  • ngrx-friendly: Easily integrate with ngrx using AngularFire’s action-based APIs.
  • Manage binary data: Upload, download, and delete binary files like images, videos, and other blobs.
  • Call server code: Directly call serverless cloud functions with user context automatically passed.
  • Push notifications: Registers and listens for push notifications.
  • Modular: Include only what’s needed. No AngularFire package is above 4KB, with most packages under 2KB (gzipped).

Installation of AngularFire2 and integration with Syncfusion’s DataGrid

Step 1: Create a new project.

npm install -g @angular/cli
ng new <project-name>
cd <project-name>

The Angular CLI’s new command will set up the latest Angular build in the new project structure.

Step 2: Install AngularFire2 and Firebase.

Now, we have a new project setup, installed with AngularFire2 and Firebase from npm.

Step 3: Configure Firebase.

Open /src/environments/environment.ts and configure Firebase. You can find your project configuration in the Firebase Console.

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'

From the project overview page, click Add Firebase to your web app to see the details, as shown in the following screenshot.Add Firebase to your web app

Step 4: Set up app.module for the AngularFireModule.

Open /src/app/app.module.ts and inject the Firebase providers. Specify your Firebase configuration.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from './../environments/environment';
import { GridModule } from '@syncfusion/ej2-angular-grids';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 5: Inject AngularFirestore.

Open /src/app/app.component.ts and add the following code example.

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database;

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
export class AppComponent {
  constructor(firestore: AngularFireDatabase) {


Step 6: Install EJ2 Grid package

Use the following getting started documentation to configure the (EJ2) Grid to the Angular application.

Step 7: Bind Firestore data to JS 2 Grid

Bind Firestore data to the JS 2 Grid in the component.ts in this location /src/app/app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {

  public grid: GridComponent;

  constructor(firestore: AngularFireDatabase) {

    firestore.list('/orders').valueChanges().subscribe(orders => {
      this.grid.dataSource = orders;   //intial data binding to grid

    firestore.list('/orders').snapshotChanges().subscribe(orders => {
      this.grid.dataSource = orders; // sync server data changes to grid

Open /src/app/app.component.html and add the following code.

<ejs-grid #grid>
      <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>      
      <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
      <e-column field='ShipCity' headerText='Ship City' width='130'></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>

Step 8: Run your app locally.

Run the application locally using the following command.

ng serve

Now, your Angular app will compile and will be served locally, as shown in the following screenshot.Bound data displayed in the EJ Grid


You can download this application from this GitHub location.


In this blog, we have learned about the installation of AngularFire2 and its integration with our JS 2 Grid. I hope it was helpful. Please share your feedback in the comments section.

For Angular developers, Syncfusion provides over 65+ high-performance, lightweight, modular, and responsive Angular components to speed up your development.

If you are already a customer, you can download our Angular package from the License and Downloads page. If you are not yet a customer, you can try our 30-day free trial to check out all our Angular components have to offer. You can also explore samples in our GitHub repository.

If you have any questions about this blog, please let us know in the comments section below. You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!


Share this post:

Comments (5)

What is your Firebase database setup like?

Hi Sam,

We have created a New firebase base project under Firebase console, then added a web app in this project for mapping config between firebase and angular app. Then created a new database in the real time databases section and updated the following rules for read and write access.

/* Visit to learn more about security rules. */
“rules”: {
“.read”: true,
“.write”: true

Next added some data in the orders table, Please refer to the attached image in the below link for the data structure.

Is there an update to using Grid with Firestore?

// Syncfusion Grid
sfGetMembers() {
const sfMembers = this.afs.collection(`users`)

sfMembers.valueChanges().subscribe(mems => {
this.grid.dataSource = mems;

sfMembers.snapshotChanges().subscribe(mems => {
this.grid.dataSource = mems;

Shows no content, however, rows are retrieved. (i.e.: I can see the table rows, but no information)

Hi Michael,

Kindly share the below details to validate your problem in detail.

1. Share the video demo of the reported problem.
2. Share the complete Grid files and package.json file.
3. Are you getting any script error in console window? If yes, share the error details.
4. Bind the actionFailure event to the Grid and let us know if you face any exceptions or errors in that event.

function actionFailure (args) {

Maithiliy K

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed