Firebase with Angular - Mini Project: Build & Apply

Firebase with Angular

📖 Scenario: You are building a simple Angular app that connects to Firebase to store and retrieve user messages. This app will let users add messages and display them in a list.

🎯 Goal: Build an Angular app that connects to Firebase Firestore. You will set up the Firebase configuration, create a service to add and get messages, and display messages in a component.

📋 What You'll Learn

Create a Firebase configuration object with the given keys

Initialize Firebase in the Angular app

Create an Angular service to add and get messages from Firestore

Create an Angular component that uses the service to display messages and add new ones

💡 Why This Matters

🌍 Real World

Many web apps use Firebase with Angular to quickly build scalable apps with real-time databases and authentication.

💼 Career

Understanding Firebase integration with Angular is valuable for frontend developers working on modern cloud-connected applications.

1

Set up Firebase configuration

Create a constant called firebaseConfig with the exact keys and values: apiKey: 'AIzaSyA-1234567890abcdef', authDomain: 'myapp.firebaseapp.com', projectId: 'myapp', storageBucket: 'myapp.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here to create firebaseConfig constant

Hint

Use a JavaScript object with the exact keys and values given.

2

Initialize Firebase in Angular

Import initializeApp from firebase/app and create a constant called app by calling initializeApp(firebaseConfig).

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'myapp.firebaseapp.com',
  projectId: 'myapp',
  storageBucket: 'myapp.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

// Your code here to import initializeApp and initialize Firebase

Hint

Use the initializeApp function with your firebaseConfig object.

3

Create Angular service for Firestore

Import getFirestore, collection, addDoc, and getDocs from firebase/firestore. Create a constant db by calling getFirestore(app). Then create an async function called addMessage that takes text and adds it to the messages collection. Also create an async function called getMessages that fetches all documents from the messages collection and returns an array of their data.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'myapp.firebaseapp.com',
  projectId: 'myapp',
  storageBucket: 'myapp.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

// Your code here to import Firestore functions and create addMessage and getMessages functions

Hint

Use Firestore functions to add and get documents from the 'messages' collection.

4

Create Angular component to use the service

Create an Angular component class called MessagesComponent. Add a property messages initialized as an empty array. Add an async method loadMessages that calls getMessages and assigns the result to this.messages. Add a method addNewMessage that takes a text parameter, calls addMessage(text), then calls loadMessages() to refresh the list.

Firebase

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'myapp.firebaseapp.com',
  projectId: 'myapp',
  storageBucket: 'myapp.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

async function addMessage(text) {
  await addDoc(collection(db, 'messages'), { text });
}

async function getMessages() {
  const querySnapshot = await getDocs(collection(db, 'messages'));
  return querySnapshot.docs.map(doc => doc.data());
}

// Your code here to create MessagesComponent class with messages array, loadMessages and addNewMessage methods

Hint

Create a class with the specified properties and methods to manage messages.

Practice

1. What is the main purpose of integrating Firebase with an Angular application?

easy

A. To run Angular code on the Firebase server

B. To replace Angular's core framework features

C. To provide backend services like database and authentication easily

D. To create static HTML pages without JavaScript

Solution

1. Step 1: Understand Firebase's role

   Firebase offers backend services such as real-time database and user authentication.

2. Step 2: Understand Angular's role

   Angular is a frontend framework that can use Firebase to add backend features easily.

3. Final Answer:

   To provide backend services like database and authentication easily -> Option C

4. Quick Check:

   Firebase adds backend services to Angular apps = D [OK]

Hint: Firebase adds backend features to Angular apps fast [OK]

Common Mistakes:

• Thinking Firebase replaces Angular framework
• Believing Firebase runs Angular code on server
• Confusing Firebase with static site generator

2. Which is the correct way to initialize Firebase in an Angular app's app.module.ts file?

easy

A. const app = firebase.initializeApp(firebaseConfig);

B. import { initializeApp } from 'firebase/app'; const app = initializeApp(firebaseConfig);

C. import firebase from 'firebase'; firebase.init(firebaseConfig);

D. firebaseApp = new Firebase(firebaseConfig);

Solution

1. Step 1: Check Firebase modular SDK usage

   Firebase v9+ uses modular imports like initializeApp from 'firebase/app'.

2. Step 2: Verify correct initialization syntax

   The correct syntax is const app = initializeApp(firebaseConfig); after importing.

3. Final Answer:

   import { initializeApp } from 'firebase/app'; const app = initializeApp(firebaseConfig); -> Option B

4. Quick Check:

   Use modular import and initializeApp() = A [OK]

Hint: Use modular import and initializeApp() for Firebase v9+ [OK]

Common Mistakes:

• Using old namespace import like 'firebase.initializeApp'
• Calling non-existent method 'firebase.init'
• Trying to create Firebase instance with 'new Firebase()'

3. Given this Angular Firebase code snippet, what will be the output in the console?

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const auth = getAuth();
signInWithEmailAndPassword(auth, '[e-mail]', 'wrongpass')
  .then(() => console.log('Login success'))
  .catch(error => console.log(error.code));

medium

A. 'auth/wrong-password'

B. 'Login success'

C. 'auth/user-not-found'

D. SyntaxError

Solution

1. Step 1: Understand signInWithEmailAndPassword behavior

   This function tries to sign in with given email and password, returns a promise.

2. Step 2: Analyze given credentials

   The password is 'wrongpass', which is incorrect, so sign-in fails and triggers catch.

3. Step 3: Check error code logged

   The catch logs error.code, which for wrong password is 'auth/wrong-password'.

4. Final Answer:

   'auth/wrong-password' -> Option A

5. Quick Check:

   Wrong password error code = 'auth/wrong-password' [OK]

Hint: Wrong password triggers 'auth/wrong-password' error code [OK]

Common Mistakes:

• Assuming success message logs on wrong password
• Confusing 'user-not-found' with wrong password error
• Expecting syntax error from correct code

4. You wrote this code in your Angular component to fetch Firestore data but get an error:

import { getFirestore, collection, getDocs } from 'firebase/firestore';

const db = getFirestore();
const usersCol = collection(db, 'users');
const userSnapshot = await getDocs(usersCol);
const userList = userSnapshot.docs.map(doc => doc.data());
console.log(userList);

What is the likely cause of the error?

medium

A. Missing async function to use await

B. Firestore collection name 'users' is invalid

C. getDocs does not exist in firebase/firestore

D. doc.data() returns undefined always

Solution

1. Step 1: Identify usage of await

   The code uses await getDocs(usersCol) which requires an async function context.

2. Step 2: Check for async function wrapper

   If this code is not inside an async function, it will cause a syntax or runtime error.

3. Final Answer:

   Missing async function to use await -> Option A

4. Quick Check:

   await must be inside async function = B [OK]

Hint: Use await only inside async functions [OK]

Common Mistakes:

• Assuming collection name 'users' is invalid
• Thinking getDocs is not part of Firestore SDK
• Believing doc.data() returns undefined always

5. You want to display a real-time list of messages in your Angular app using Firebase Firestore. Which approach correctly sets up a subscription to update the list automatically when data changes?

import { getFirestore, collection } from 'firebase/firestore';
import { collectionData } from 'rxfire/firestore';

const db = getFirestore();
const messagesCol = collection(db, 'messages');

// What should you do next?

hard

A. Use messagesCol.onSnapshot() without import

B. Call getDocs(messagesCol) once and assign to messages

C. Use collectionData(messagesCol).then(data => this.messages = data);

D. Use collectionData(messagesCol).subscribe(data => this.messages = data);

Solution

1. Step 1: Understand real-time updates with Firestore

   Firestore supports real-time listeners that update data when changes occur.

2. Step 2: Use RxFire's collectionData for Angular

   RxFire's collectionData returns an observable you can subscribe to for live updates.

3. Step 3: Correct subscription syntax

   Using collectionData(messagesCol).subscribe(data => this.messages = data); sets up real-time updates properly.

4. Final Answer:

   Use collectionData(messagesCol).subscribe(data => this.messages = data); -> Option D

5. Quick Check:

   Subscribe to collectionData observable for real-time updates = C [OK]

Hint: Subscribe to collectionData observable for live Firestore updates [OK]

Common Mistakes:

• Using getDocs for one-time fetch instead of real-time
• Calling onSnapshot without proper import or context
• Using then() on observable instead of subscribe()