Example use
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
export const appConfig: ApplicationConfig = {
providers: [
provideFirebaseApp(() => initializeApp({ ... })),
provideFirestore(() => getFirestore()),
...
],
...
})
import { AsyncPipe } from '@angular/common';
import { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
interface Item {
name: string,
...
};
@Component({
selector: 'app-root',
template: `
<ul>
@for (item of (item$ | async); track item) {
<li>
{{ item.name }}
</li>
}
</ul>
`,
imports: [AsyncPipe]
})
export class AppComponent {
firestore = inject(Firestore);
itemCollection = collection(this.firestore, 'items');
item$ = collectionData<Item>(itemCollection);
}