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:
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
this very easy and loads of people have it. do something more challenging that other ppl dont have.
Sure Anton and thanks.
Nice tutorial This has help me a lot since I am new to Angular. Thanks Ajay. Ray from Ghana
You are welcome.