Firebase With Angular CRUD Operations

Firebase 9 with Angular 13

Firebase is a Backend-as-a-Service. It provides developers and organizations with a variety of tools and services to help them develop quality apps, grows their user base, and earn profit. It is built on Google’s infrastructure. Firebase is a NoSQL database, which stores data in JSON-like documents.

In Firebase, a document is a set of key-value pairs defined by a schema. A group of documents makes up a collection.

Key features of Firebase are

• Authentication
• Realtime Database
• Hosting
• Notifications

In this article, we will be integrating Firebase with Angular and performing basic CRUD operations. We will fetch data from Firebase in real-time.

We will create a basic UI where we can enter students’ names & ages, fetch a student list, delete a student and update their details.

Create Project

Create an angular project using the below command.

ng new firebase9 and install the following module

npm i firebase

I’ll be using visual studio code.

Code

Remove the content of app.component.html

Create a component using the below command

ng g c firebase-crud — skip-tests

Place below code in firebase-crud.component.html

And below code in firebase-crud.component.ts

In HTML and TS files, I have added simple add, delete, get and update functions which will call firebase functions later to perform CRUD.

Create a service using the below command where we will call firebase functions to perform CRUD operations.

ng g s firebase — skip-tests

Now, navigate to this URL to create a firebase project.

Grab the firebase configuration object from Project Settings->General and place it in environment.ts like below.

Then create a Firebase database and a collection named students.

Place below code in firebase.service.ts.

In this service, we are performing the below operations.

• Inside constructor, initialize firebase app with firebase configurations, fetch Firebase database, and above created students collection. We are also subscribing to data changes of students collection so that we can get real-time updates and show updated data in UI.
• getStudents:- fetches all students data.
• deleteStudent:- delete a single student based on document ID.
• updateStudent:- update a single student based on document ID.
• addStudent:- add new student to students collection.

Now, let’s update firebase-crud.component.ts so that it can call firebase.service.ts crud functions. Place below code in firebase-crud.component.ts

Now, run npm start or ng serve command, go to http://localhost:4200 and perform amazing crud operations with firebase.

UI

If you are having any questions, leave a comment.

Check out the Github repository for source code.

GitHub - dev-sankhadip/CRUD-operations-in-Firebase-Angular

Sankhadip Samanta

Software Engineer, Mirra | Tech Writer

Find me on Linkedin 😃 and Github 😅