Firebase with Angular - Step-by-Step Execution

Process Flow - Firebase with Angular

Start Angular App

↓

Initialize Firebase Config

↓

Connect Angular to Firebase

↓

Use Firebase Services (Auth, DB)

↓

Angular Components interact with Firebase

↓

Display Data / Update UI

↓

User Actions trigger Firebase Calls

↓

Firebase updates data

↓

Angular UI reflects changes

↓

End

This flow shows how an Angular app initializes Firebase, connects to its services, and interacts with Firebase to update and display data dynamically.

Execution Sample

Firebase

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

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

async function fetchData() {
  const querySnapshot = await getDocs(collection(db, 'items'));
}

This code initializes Firebase in Angular and fetches documents from the 'items' collection in Firestore.

Process Table

Step	Action	Firebase State	Angular State	Result
1	Angular app starts	No connection	App bootstrapped	Ready to initialize Firebase
2	Initialize Firebase with config	Firebase app created	Firebase service ready	Firebase connected
3	Get Firestore instance	Firestore service ready	Firestore service injected	Ready to query data
4	Call getDocs on 'items' collection	Query sent to Firestore	Awaiting data	Fetching documents
5	Firestore returns documents	Data received	Data stored in component	Documents ready to display
6	Angular updates UI with data	No change	UI reflects documents	User sees list of items
7	User triggers data update	Update request sent	Waiting for confirmation	Data update in progress
8	Firestore confirms update	Data updated	Component state updated	UI refreshes with new data
9	End of flow	Stable connection	UI synced with Firebase	App running smoothly

💡 Flow ends when Angular UI is synced with Firebase data and app is running.

Status Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 8	Final
firebaseApp	undefined	initialized	initialized	initialized	initialized	initialized
firestoreDb	undefined	undefined	initialized	initialized	initialized	initialized
querySnapshot	undefined	undefined	pending	received	received	received
componentData	empty	empty	empty	populated	updated	updated
UI	blank	blank	blank	shows data	shows updated data	shows updated data

Key Moments - 3 Insights

Why do we initialize Firebase before using Firestore?

Firebase must be initialized first (see Step 2) to create the app instance. Firestore depends on this instance to connect and work properly (Step 3).

What happens if getDocs is called before Firestore is ready?

The query will fail or hang because Firestore service is not initialized yet. Step 3 ensures Firestore is ready before querying (Step 4).

How does Angular update the UI after data changes in Firebase?

After Firestore returns data (Step 5), Angular stores it in component state and triggers UI update (Step 6). Later updates follow the same pattern (Steps 7-8).

Visual Quiz - 3 Questions

Look at the execution table, at which step does Angular receive data from Firebase?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Check the 'Result' column for when documents become ready to display.

According to the variable tracker, what is the state of 'componentData' after Step 5?

A populated

B pending

C empty

D undefined

💡 Hint

Look at the 'componentData' row under 'After Step 5' column.

If Firebase initialization (Step 2) fails, what will happen to the Angular app state?

A App will be ready and fetch data normally

B App will not connect to Firebase and cannot fetch data

C Firestore service will be initialized anyway

D UI will show data from cache

💡 Hint

Refer to Step 2 and Step 3 in the execution table about Firebase and Firestore initialization.

Concept Snapshot

Firebase with Angular:
- Initialize Firebase app with config before use
- Get Firestore instance from Firebase app
- Use Firestore methods (getDocs, collection) to fetch data
- Store data in Angular component state
- Angular UI updates automatically with new data
- User actions trigger Firebase updates reflected in UI

Full Transcript

This visual execution shows how an Angular app integrates with Firebase. First, the Angular app starts and initializes Firebase with configuration. Then it gets the Firestore service instance. The app queries Firestore for documents in a collection, waits for the data, and stores it in component state. Angular updates the UI to show this data. When users trigger updates, Firebase processes them and Angular refreshes the UI accordingly. Variables like firebaseApp, firestoreDb, and componentData change state step-by-step to reflect this flow. Key moments include the necessity of initializing Firebase before Firestore, waiting for Firestore readiness before querying, and how Angular updates the UI after data changes. The quizzes test understanding of when data is received, variable states, and failure scenarios.

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()