Angular with Firebase

# Install Firebase and AngularFire
npm install firebase @angular/fire

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_ID",
  appId: "YOUR_APP_ID"
};

export const appConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ]
};

import { Injectable } from '@angular/core';
import { Auth, signInWithEmailAndPassword, createUserWithEmailAndPassword,
         signOut, user } from '@angular/fire/auth';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthService {
  currentUser$ = user(this.auth); // Observable of the current user

  constructor(private auth: Auth, private router: Router) {}

  async register(email: string, password: string): Promise<void> {
    await createUserWithEmailAndPassword(this.auth, email, password);
    this.router.navigate([&#039;/dashboard&#039;]);
  }

  async login(email: string, password: string): Promise<void> {
    await signInWithEmailAndPassword(this.auth, email, password);
    this.router.navigate([&#039;/dashboard&#039;]);
  }

  async logout(): Promise<void> {
    await signOut(this.auth);
    this.router.navigate([&#039;/login&#039;]);
  }
}

<!-- Display user info using async pipe -->
<ng-container *ngIf="authService.currentUser$ | async as user">
  <p>Logged in as: {{ user.email }}</p>
  <button (click)="authService.logout()">Logout</button>
</ng-container>

import { Injectable } from '@angular/core';
import { Firestore, collection, addDoc, collectionData,
         deleteDoc, doc, updateDoc } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export interface Todo {
  id?: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

@Injectable({ providedIn: 'root' })
export class TodoService {
  private todosRef = collection(this.firestore, 'todos');

  constructor(private firestore: Firestore) {}

  getTodos(): Observable<Todo[]> {
    return collectionData(this.todosRef, { idField: &#039;id&#039; }) as Observable<Todo[]>;
  }

  addTodo(title: string): Promise<any> {
    return addDoc(this.todosRef, {
      title,
      completed: false,
      createdAt: new Date()
    });
  }

  deleteTodo(id: string): Promise<void> {
    const todoDoc = doc(this.firestore, `todos/${id}`);
    return deleteDoc(todoDoc);
  }

  toggleComplete(id: string, completed: boolean): Promise<void> {
    const todoDoc = doc(this.firestore, `todos/${id}`);
    return updateDoc(todoDoc, { completed: !completed });
  }
}

@Component({ selector: 'app-todo', templateUrl: './todo.component.html' })
export class TodoComponent {
  todos$ = this.todoService.getTodos(); // Real-time Observable!
  newTodo = '';

  constructor(public todoService: TodoService) {}

  add(): void {
    if (this.newTodo.trim()) {
      this.todoService.addTodo(this.newTodo);
      this.newTodo = '';
    }
  }
}

<input [(ngModel)]="newTodo" placeholder="Add todo..." />
<button (click)="add()">Add</button>

<ul>
  <li *ngFor="let todo of todos$ | async">
    <span [style.textDecoration]="todo.completed ? &#039;line-through' : 'none'">
      {{ todo.title }}
    </span>
    <button (click)="todoService.toggleComplete(todo.id!, todo.completed)">✓</button>
    <button (click)="todoService.deleteTodo(todo.id!)">✕</button>
  </li>
</ul>

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Initialize Firebase in your project
firebase init

# Build the Angular app for production
ng build --configuration=production

# Deploy to Firebase Hosting
firebase deploy