Firebase CRUD Operations in Angular Part -1

In this article, we create CRUD(create, read, edit, delete) operation in Firebase using Angular.

1) First, we need to set up an angular project. we install in that project bootstrap & Fontawsone.


ng new angularfirebase-userapp

“angularfirebase-userapp” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd angularfirebase-userapp”.
Now let’s install bootstrap and font-awesome for the base for the layout.


//install bootstarp
npm install bootstrap

//install font awsome 
npm i @fortawesome/fontawesome-free

After installing the module we need to add CSS in angular.json. Need to add the below code in that file



"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/@fortawesome/fontawesome-free/css/all.css",
     "src/styles.css"
]

2) Set up Firebase Account for our project for that first we need to open the firebase website. Go to Firebase Wensite and login using your Gmail account. after login it display below screen.

Click on the “Create a Project” button to create new project then it display the form create application display in the below video how to fill the detail and get the configration for the project.

After creating the project we need to get config for the project. It display like in below screen shot.

After getting the config we need to add in our angular application “enviorment.ts” & “enviorment.prod.ts” display in below screen shot.



In Firebase project we create databse “Realtime Database” display in below video.

After setup firebase databse we now need to install firbase in our angular application.


npm install firebase @angular/fire --save

After install module. We need to import firebase in app.module.ts file. display in belo code.


............

// Firebase Modules
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
................
@NgModule({

............
imports: [
  ....
    AngularFireModule.initializeApp(environment.firebase), // Main Angular fire module 
    AngularFireDatabaseModule,  // Firebase database module 
   ....    
  ],
..........

})

3) After importing the AngularFireModule, AngularFireDatabaseModule. We can use it in our component to fetch data from the database and store database. For our user listing App, we need to create a service for the sending receiving, and listing function we need to create.


ng g s shared/crud

In service, we create a function for the add, edit, update, delete function created display in below code.


import { Injectable } from '@angular/core';
import { User } from '../shared/user';  // User data type interface class
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';  // Firebase modules for Database, Data list and Single object

@Injectable({
  providedIn: 'root'
})

export class CrudService {
  usersRef: AngularFireList;    // Reference to User data list, its an Observable
  userRef: AngularFireObject;   // Reference to User object, its an Observable too
  
  // Inject AngularFireDatabase Dependency in Constructor
  constructor(private db: AngularFireDatabase) { }

  // Create User
  AddUser(user: User) {
    this.usersRef.push({
      firstName: user.firstName,
      lastName: user.lastName,
      email: user.email,
      mobileNumber: user.mobileNumber
    })
  }

  // Fetch Single User Object
  GetUser(id: string) {
    this.userRef = this.db.object('users-list/' + id);
    return this.userRef;
  }

  // Fetch User List
  GetUsersList() {
    this.usersRef = this.db.list('users-list');
    return this.usersRef;
  }  

  // Update User Object
  UpdateUser(user: User) {
    this.userRef.update({
      firstName: user.firstName,
      lastName: user.lastName,
      email: user.email,
      mobileNumber: user.mobileNumber
    })
  }  

  // Delete User Object
  DeleteUser(id: string) { 
    this.userRef = this.db.object('users-list/'+id);
    this.userRef.remove();
  }
  
}

In the next article, We discuss to create a user form to add, edit, delete, and list of the users.

Spread the love
  •  
  •  
  •  
  •  
  • 2
  • 2
  •  
  •