Firebase and Angular Integration: Complete Walkthrough

I often use Firebase because it is free and offers many benefits for learning. Firebase provides a backend cloud computing service with a NoSQL database called Firestore. Whenever I created a frontend application using Angular, I faced issues connecting Firebase with my Angular application. I encountered the same problem when the Angular and Firebase versions changed. Now, I want to share my experience with you so you don't face the same problem.

In this post, I'm using Angular Version: 16.2.3 and Firestore Version: 7.6.1.

I won't be explaining how to create a Firebase application or an Angular application.

Let's begin with connecting Angular to Firebase.

1. Start by creating a new Angular application.

2. Set up the environment files for your Angular application.

3. Create a new Firebase application. If you don't have a Firebase account, you can easily sign in with your Google account.

4. After creating your Firebase and Angular applications, run the following command:

    npm install -g firebase-tools
   

   This command will install the Firebase CLI.

5. After installing the Firebase CLI, log in to Firebase from your Angular application by running this command:

    firebase login
   

6. After running the command, you will be prompted to sign in using your browser.

7. Run the following command:

    ng add @angular/fire
   

   

   During the installation process, select your Firebase application. You will also have the option to select Firestore. By default, the hosting option will be selected, but you can choose to keep or remove it based on your needs.

   Note: use mouse arrow keys to move and spacebar to select or remove the options.

8. Once the process is completed, the Firebase configurations will automatically be stored in the environment files.

9. If you encounter any errors after this process, try running the following command:

    npm install firebase@latest
   

10. If you are still facing issues after this step, try restarting the Angular application.

11. Now we have connected the firebase with our angular application.

Connecting Firestore with Angular

1. Create a sample form in HTML. You can also use Angular forms.

2. Inject Firestore in the constructor:

    import { Firestore } from '@angular/fire/firestore';
   
    constructor(private firestore: Firestore) {}
   

3. Once you have injected Firestore, you can write the functionality for adding data to Firebase as shown below:

    import { addDoc, collection } from 'firebase/firestore';
   
    onSubmit() {
        const collectionData = collection(this.firestore, 'users');
        addDoc(collectionData, this.userDetails.value)
            .then(() => {
                console.log(this.userDetails.value);
                this.contactus.reset();
            })
            .catch((err) => {
                console.error(err);
            });
    }
   

4. After updating this, you will be able to see the data in Firebase.