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 { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
interface Item {
name: string,
...
};
@Component({
selector: 'app-root',
standalone: true,
template: `
<ul>
@for (item of (item$ | async); track item) {
<li>
{{ item.name }}
</li>
}
</ul>
`
})
export class AppComponent {
item$: Observable<Item[]>;
firestore: Firestore = inject(Firestore);
constructor() {
const itemCollection = collection(this.firestore, 'items');
this.item$ = collectionData<Item>(itemCollection);
}
}
Polyfills
Neither AngularFire nor Firebase ship with polyfills. To have compatibility across a 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 |