Angular application using Firebase as the Database

Angular Updated On October 14 2023

This blog post talks about the perfect partnership between Angular and Firebase. You'll learn how to create a dynamic, real-time web application using Angular as your front-end framework and Firebase as your robust, serverless database. Whether you're a seasoned developer or just getting started, this guide will equip you with the knowledge to build responsive, scalable, and data-driven applications effortlessly.

Key Takeaways

Discover how Angular and Firebase can seamlessly work together to create dynamic web applications.
Understand how Firebase's serverless architecture ensures your app can grow without infrastructure worries.
Explore Firebase's built-in user authentication and security features to protect your application and data.

What Is a Firebase?

Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as real-time database, cloud storage, authentication, crash reporting, analytics, and so on. It is built on Google's infrastructure and scales automatically.

There are two different ways you can use Firebase in your projects:

Using Firebase JS SDK
Using React Native Firebase

React Native supports both the JS SDK and the native SDK. The following sections will guide you through when to use which SDK and all the configuration steps required to use Firebase in your Expo projects.

INITIAL SETUP:

1. First, we need node.js. Install it from here if it is not already installed.

2. Install angular cli
npm install -g @angular/cli

3. Go to firebase

Screenshot 2023-10-14 at 11.24.34 PM

4. Sign Up or Log in there
5. From the top right corner, click Go To Console
6. Click Add Project and create a new project with the desired name.

7. From the project overview page, create a new web app.

Screenshot 2023-10-14 at 11.25.44 PM

8. On the bottom of the General tab, keep the config data for future use.

9. Go to the Cloud Messaging tab and Keep the Server Key and Sender ID.
10. On the bottom of the Web Push Certification section, click Generate key pair and keep the new generated key.

Methods Used to Send Messages to Firebase:

addDoc()- In order to use the addDoc() method, we need to import three methods from the Firebase Firestore import statement.

getDatabase() → Firestore database where we want to add data as a document.
collection() → Where we want to add collection name and database references.
addDoc() → Where we actually pass our data along with the collection name and db references.

import { getFirestore, collection, addDoc } from "firebase/firestore";

2. updateDoc()- In order to update an existing document using the updateDoc() method, we need three methods:

getDatabase() → where we want to update a document.
doc() → where we’ll be passing references of the database, collection and ID of a document that we want to update one of its fields.
updateDoc() → where we actually pass new data that we want to replace along with the doc() method.

import { getFirestore, doc, updateDoc } from "firebase/firestore";

3. deleteDoc() - First, import Firestore Database and de-structure the three methods we need:

getFirestore()
doc()
deleteDoc()

import { getFirestore, doc, deleteDoc } from "firebase/firestore";

Adding Firebase to the project:

The Firebase team offers the package @angular/fire, which provides integration between the two technologies.

ng add @angular/fire

This command installs the @angular/fire package and asks you a few questions. In your terminal, you should see something like:

2. Next, we need to create a Firestore database! Under "Cloud Firestore" click "Create Database."

Screenshot 2023-10-14 at 11.26.45 PM

3. After that, create a database in test mode:

Screenshot 2023-10-14 at 11.27.20 PM

4. Finally, select a region:

Screenshot 2023-10-14 at 10.48.01 PM

5. When you create a new task in the user interface and open Firestore, you should see something like this:

Screenshot 2023-10-14 at 10.50.31 PM

How Firestore is used in a Project:

When we send a text in a chat, we will text in a list box of a chat, if we share an image, we will see a Photo with a camera icon in a list box and if we share a file (doc, csv, pdf, xlsx, docx, pptx) we will able to see that filename in a list box of that sending and receiving user.

Messages.component.html

<span *ngIf="!message?.imageUrl"

[innerHTML]="message?.text | detectUrls"></span>

<img class="chat-img cursor-pointer"

[title]="message?.fileName"

(click)="open(0, message?.imageUrl)"

*ngIf="message?.messageType === 'Image'"

[src]="message?.imageUrl" />