Display multiple tables

Install @angular/fire and firebase packages

npm install @angular/fire@latest firebase@latest --save

Authorize your project

firebase login --reauth

Add Firebase to your project

ng add @angular/fire

Service

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Firestore, collectionData } from '@angular/fire/firestore';
import { collection } from 'firebase/firestore';

@Injectable({
  providedIn: 'root',
})
export class FirestoreService {
  constructor(private readonly firestore: Firestore) {}

  getAllShoppingList$(): Observable<any[]> {
    const itemCollection = collection(this.firestore, 'shoppinglist');
    return collectionData(itemCollection, { idField: 'id' });
  }

  getAllExpense$(): Observable<any[]> {
    const itemCollection = collection(this.firestore, 'expense');
    return collectionData(itemCollection, { idField: 'id' });
  }
  getAllTodoList$(): Observable<any[]> {
    const itemCollection = collection(this.firestore, 'todo');
    return collectionData(itemCollection, { idField: 'id' });
  }
}

Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FirestoreService } from 'src/app/services/firestore.service';

@Component({
  selector: 'app-shoppinglist',
  templateUrl: './shoppinglist.component.html',
  styleUrls: ['./shoppinglist.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class ShoppinglistComponent {
  constructor(private readonly firestore: FirestoreService) {}

  shoppinglist$ = this.firestore.getAllShoppingList$();
  expenselist$ = this.firestore.getAllExpense$();
  todolist$ = this.firestore.getAllTodoList$();
}

Template

<h2>Shopping List</h2>
<ul class="list-group">
  <li class="list-group-item" *ngFor="let item of shoppinglist$ | async">
    {{ item.title }}
  </li>
</ul>

<h2>Expense</h2>
<ul class="list-group">
  <li class="list-group-item" *ngFor="let item of expenselist$ | async">
    {{ item.title }}
  </li>
</ul>

<h2>Todo List</h2>
<ul class="list-group">
  <li class="list-group-item" *ngFor="let item of todolist$ | async">
    {{ item.title }}
  </li>
</ul>