How to get data from Firebase Firestore-CodePudding

See this is my HTML File:

<div >
 <h1>Current Items</h1>
 <ul >
  <li >An item</li>
  <li >A second item</li>
  <li >A third item</li>
  <li >A fourth item</li>
  <li >And a fifth one</li>
 </ul>
</div>

And this is my TS file:

import ...

@Component ...
export class HomeComponent ..

  // get every data from cloud firestore from the collection 'data' and return it as a string
  getData() {
   const db = getFirestore();
  }

  ...

}

And inside getData(), I want to return the data from my collection "data" in Firebase Firestore.

CodePudding user response：

First you need to add your firebase config into environment.ts file like shown below:-

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "*************************",
    authDomain: "*************************",
    projectId: "*************************",
    storageBucket: "*************************",
    messagingSenderId: "*************************",
    appId: "*************************",
    measurementId: "*************************"
  }
};

and then import AngularFireModule and AngularFirestoreModule from @angular/fire

AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule

then in you service class:-

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private fbs: AngularFirestore) {}

  getData() {
   return this.fbs
  .collection("collectionName")
  .snapshotChanges();
}