Firebase with Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in an Angular app.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
};

const app = initializeApp([1]);

Drag options to blanks, or click blank then click option'

AfirebaseConfig

BappConfig

CconfigFirebase

DfirebaseSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name for the config object.

Forgetting to pass any argument to initializeApp.

The initializeApp function requires the Firebase configuration object, which is named firebaseConfig here.

2fill in blank

medium

Complete the code to import Firestore service from Firebase in Angular.

Firebase

import { getFirestore } from '[1]';

const db = getFirestore(app);

Drag options to blanks, or click blank then click option'

Afirebase/firestore/lite

Bfirebase/firestore

Cfirebase/database

Dfirebase/auth

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'firebase/database' which is for Realtime Database.

Using 'firebase/auth' which is for authentication.

The Firestore service is imported from firebase/firestore to use the full Firestore features.

3fill in blank

hard

Fix the error in the Angular Firestore query to get a collection.

Firebase

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

async function fetchUsers() {
  const usersCol = collection(db, [1]);
  const userSnapshot = await getDocs(usersCol);
  return userSnapshot.docs.map(doc => doc.data());
}

Drag options to blanks, or click blank then click option'

AuserCollection

Busers

C'users'

D'userList'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a variable without quotes when a string literal is needed.

Using incorrect collection names.

The collection name must be a string, so it should be enclosed in quotes like 'users'.

4fill in blank

hard

Fill both blanks to add a document to Firestore with Angular.

Firebase

import { collection, addDoc } from 'firebase/firestore';

async function addUser() {
  const usersCol = collection(db, [1]);
  const docRef = await addDoc(usersCol, [2]);
  return docRef.id;
}

Drag options to blanks, or click blank then click option'

A'users'

B{ name: 'Alice', age: 30 }

C'userData'

D{ username: 'alice123' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong collection names.

Passing incorrect data types instead of an object.

The collection name is 'users' and the document data is an object with user details like { name: 'Alice', age: 30 }.

5fill in blank

hard

Fill all three blanks to update a Firestore document in Angular.

Firebase

import { doc, updateDoc } from 'firebase/firestore';

async function updateUser() {
  const userDoc = doc(db, [1], [2]);
  await updateDoc(userDoc, [3]);
}

Drag options to blanks, or click blank then click option'

A'users'

B'user123'

C{ age: 31 }

D'userId'

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of string literals for collection or document ID.

Passing non-object types as update data.

To update a document, specify the collection 'users', the document ID 'user123', and the update data object { age: 31 }.