Example use
import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
@NgModule({
imports: [
provideFirebaseApp(() => initializeApp({ ... })),
provideFirestore(() => getFirestore()),
],
...
})
export class AppModule { }
import { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
interface Item {
name: string,
...
};
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of item$ | async">
{{ item.name }}
</li>
</ul>
`
})
export class AppComponent {
item$: Observable<Item[]>;
firestore: Firestore = inject(Firestore);
constructor() {
const itemCollection = collection(this.firestore, 'items');
this.item$ = collectionData(itemCollection);
}
}
Polyfills
Neither AngularFire or Firebase ship with polyfills. To have compatibility across as wide-range of environments we suggest the following polyfills be added to your application:
API | Environments | Suggested Polyfill | License |
---|---|---|---|
Various ES5+ features | Safari < 10 | core-js/stable |
MIT |
globalThis |
Chrome < 71 Safari < 12.1 iOS < 12.2 Node < 12 |
globalThis |
MIT |
Proxy |
Safari < 10 | proxy-polyfill |
Apache 2.0 |
fetch |
Safari < 10.1 iOS < 10.3 |
cross-fetch |
MIT |