Angular 10,11 Datatable with 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.

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:

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": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              ...
              "node_modules/jquery/dist/jquery.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ]
...

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: [
    ...
    DataTablesModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,
    AngularFirestoreModule,
  ],
...

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;

  ngOnInit(){
  //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);
    })
    console.log(this.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">
  <thead>
    <tr>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Email</th>
      <th>Mobile</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of Student">
         <td>{{group.firstName}}</td>
         <td>{{group.lastName}}</td>
         <td>{{group.email}}</td>
         <td>{{group.mobileNumber}}</td>
     </tr>
  </tbody>
</table>

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.

Jassa

Thanks