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

Need a 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

Need a 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

Need a 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

Need a hint?

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