Can't fetch data from Firestore in Angular – no response from service

I'm trying to fetch data from a Firestore collection called 'Users' into my Angular application, but I'm not getting any response — the data doesn't show up in the component.

Here’s a summary of what I’ve done: service.ts

import { Injectable,inject} from '@angular/core';
import { addDoc, collection, collectionData, Firestore } from '@angular/fire/firestore';
import { SignIn } from '../models/sign-in';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class SignInService {

private firebase:Firestore=inject(Firestore);



fetchData():Observable<any[]>{
const listOfUsers = collection(this.firebase, 'Users');
return collectionData(listOfUsers , {idField:'id'}) as Observable<any[]>;

}


userlist.ts

import { Component } from '@angular/core';
import { SignInService } from '../services/sign-in.service';
import { NgFor } from '@angular/common';

@Component({
selector: 'app-users-list',
imports: [NgFor],
templateUrl: './users-list.component.html',
styleUrl: './users-list.component.css',
standalone:true
})
export class UsersListComponent {

constructor(private firebase:SignInService){}
users:any;

showData(){
this.firebase.fetchData().subscribe(data=>{
this.users=data;
});


}

Continue reading...