Firebase with Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does AngularFire handle real-time data updates?

When using AngularFire to connect Angular with Firebase Realtime Database, how does AngularFire update the UI when data changes in Firebase?

A AngularFire listens to Firebase data changes and automatically updates Angular components using observables.

B AngularFire requires manual polling every few seconds to fetch updated data from Firebase.

C AngularFire updates the UI only when the user refreshes the browser page.

D AngularFire sends data changes to Firebase only when the user clicks a button.

💡 Hint

Think about how AngularFire integrates with Angular's reactive programming model.

AngularFire uses observables to listen to Firebase data changes in real-time. When data changes, AngularFire emits new values, and Angular updates the UI automatically without manual refresh or polling.

❓ Configuration

intermediate

Correct Firebase configuration in Angular environment file

Which of the following is the correct way to store Firebase configuration in an Angular environment file?

A export const environment = { production: false, firebase: { apiKey: 'API_KEY', authDomain: 'PROJECT.firebaseapp.com', projectId: 'PROJECT', storageBucket: 'PROJECT.appspot.com', messagingSenderId: 'SENDER_ID', appId: 'APP_ID' } };

B export const environment = { production: false, firebase: { key: 'API_KEY', domain: 'PROJECT.firebaseapp.com' } };

C export const environment = { production: false, firebase: 'API_KEY,PROJECT.firebaseapp.com,PROJECT' };

D export const environment = { production: false, firebaseConfig: 'apiKey=API_KEY;authDomain=PROJECT.firebaseapp.com' };

💡 Hint

Firebase config is an object with specific keys, not a string.

The Firebase configuration must be an object with keys like apiKey, authDomain, projectId, etc. This allows AngularFire to initialize Firebase properly.

❓ Architecture

advanced

Best architecture for secure Firebase data access in Angular

You want to build an Angular app with Firebase that securely restricts user data access. Which architecture approach is best?

A Use Angular guards to block unauthorized routes but allow all Firebase data access.

B Use Firebase Authentication to identify users and Firebase Security Rules to restrict data access based on user ID.

C Store all user data in a public Firebase collection and filter data in Angular after fetching.

D Disable Firebase Security Rules and rely on Angular to hide data from unauthorized users.

💡 Hint

Think about where data access control should happen for security.

Firebase Security Rules enforce data access on the server side, ensuring users can only read/write their own data. Firebase Authentication identifies users. Angular guards control UI routes but do not secure data access.

✅ Best Practice

advanced

Optimizing Angular app performance with Firebase queries

Which practice helps optimize performance when querying large Firebase collections in Angular?

A Disable Firebase offline persistence to always get fresh data.

B Fetch entire collections and filter data in Angular to reduce Firebase query complexity.

C Use multiple nested subscriptions to fetch data piece by piece without queries.

D Use Firebase queries with limits and indexes to fetch only needed data instead of entire collections.

💡 Hint

Think about reducing data transferred and processed.

Using Firebase queries with limits and indexes reduces data transfer and speeds up app performance. Fetching entire collections wastes bandwidth and slows UI. Offline persistence improves performance by caching data.

❓ security

expert

What error occurs if AngularFire tries to read Firebase data without proper security rules?

If AngularFire attempts to read a Firebase Realtime Database path without read permission in Security Rules, what error will it receive?

A SyntaxError: Unexpected token in JSON.

B TypeError: Cannot read property of undefined.

C FirebaseError: Missing or insufficient permissions.

D TimeoutError: Request timed out.

💡 Hint

Think about Firebase's response when access is denied.

Firebase returns a FirebaseError with message 'Missing or insufficient permissions' when security rules deny read access. Other errors relate to code bugs or network issues.

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