Home Angular 10 Angular 10,11 Datatable with Firebase

Angular 10,11 Datatable with Firebase

by therichpost
Published: Last Updated on 12 comments
Angular Firebase

Hello friends, welcome back to my blog. Today in this blog post, I an going to tell you, Angular 10,11 Datatable with Firebase Data.

Angular Datatable with Firebase Data

Friends Angular 11 came, please check below links for basic knowledge:

Angular 11 Basics Tutorials

Angular 10 For Beginners

Now below is the complete code snippet for Angular 10,11 Datatable with Firebase Data:

1. Very first, please check the below video to create database on Firebase and that will be very helpful to you:

Create Database on Firebase

2. Here are basic commands you need to run inside your terminal to get fresh Angular 10 setup:

Also you have latest node install into your system

npm install -g @angular/cli //Setup Angular10 atmosphere

ng new angulardatatable //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angulardatatable //Go inside the Angular 10 Project


3. Now run below commands inside your terminal to get Firebase and Datatable modules:

npm install firebase @angular/fire --save

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install ngx-bootstrap bootstrap --save


4. Now add below code into your angular.json file:

            "styles": [
            "scripts": [


5. Now add your FireBase Config settings into src/environments/environment.ts file and for better understanding you can check point number 1:

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "****",
    authDomain: "****",
    databaseURL: "****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"


6. Now add below code into src/app/app.module.ts file:

import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';

imports: [


7. Now add below code into your src/app/app.component.ts file:

import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';
export interface Student {
  $key: string;
  firstName: string;
  lastName: string;
  email: string
  mobileNumber: Number;
export class AppComponent {
  Student  = [];
  studentsRef: AngularFireList<any>;  
  constructor(private db: AngularFireDatabase){}
  //Datatabe settings
  dtOptions: DataTables.Settings = {};

  // Check to show datatabe when firebase data comes
  isShow = false;

  //Get Data from firebase Database
  this.studentsRef = this.db.list('students-list');
  //Embed Data Into Array Variable
  this.studentsRef.snapshotChanges().subscribe(data => { // Using snapshotChanges() method to retrieve list of data along with metadata($key)
    this.Student = [];
    data.forEach(item => {
      let a = item.payload.toJSON(); 
      a['$key'] = item.key;
      this.Student.push(a as Student);
    //Datatable settings and showing
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      lengthMenu : [5, 10, 25],
      processing: true
    this.isShow = true;


8. Finally add below code into src/app/app.component.html file:

<table *ngIf="isShow" class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
   <tr *ngFor="let group of Student">


This is it and don’t forget to run ng serve command. With this tutorial, you will also know how to show dynamic data in angular 10,11 datatable.

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding and live working must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.



You may also like


Anton July 18, 2020 - 5:31 pm

this very easy and loads of people have it. do something more challenging that other ppl dont have.

Ajay Malhotra July 19, 2020 - 5:50 am

Sure Anton and thanks.

Raymond December 12, 2020 - 3:21 pm

Nice tutorial This has help me a lot since I am new to Angular. Thanks Ajay. Ray from Ghana

Ajay Malhotra December 12, 2020 - 5:30 pm

You are welcome.

Anand May 12, 2021 - 4:43 pm

Good tutorial. But I am confused as in if you are using Firestore or Real-time database?
I am using Firestore with your example and it is giving me the following error.
“FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly”

I have copy-pasted the config and double-checked it. It’s correct.

Ajay Malhotra May 12, 2021 - 4:45 pm

I am using firestore and I think, there is issue in your side.

Anand May 12, 2021 - 5:10 pm

Funny. When I created Firebase database and app, I do not have ‘databaseurl’ key in the config.
Also now there are two options in firebase, ‘Firestore database’ and ‘Realtime database.
Is it possible to confirm your @angularfire version?

Thanks a ton mate.

Ajay Malhotra May 12, 2021 - 5:12 pm

Angular 10 but I have used same in Angular 11 +.

Anand May 12, 2021 - 5:21 pm

Is it possible for you to share repo with us?

Ajay Malhotra May 12, 2021 - 5:23 pm

I don’t have.

dyas January 24, 2022 - 9:45 pm

Gracias amigo..!! Muy bueno fácil y bien explicado.. seria bueno que le añadas la característica responsiva a la tabla.. seria mucho mas completo! saludos

Ajay Malhotra January 25, 2022 - 8:12 am

Gracias amigo. si lo haré


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.