[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"projects/angular/angularfire2":3,"projects/angular/angularfire2/:README":16},{"name":4,"type":5,"content":6,"platforms":7,"blacklist":9,"description":10,"fork":9,"stars":11,"last_updated":12,"last_fetched":13,"id":14,"ref":15},"angularfire2","library","README.md",{"web":8},true,false,"Angular + Firebase = ❤️",7759,["Date","2025-04-07T19:49:32.000Z"],["Date","2025-04-09T01:40:27.217Z"],"angular::angularfire2","[object Object]",{"header":17,"sections":20,"id":14,"ref":15},{"name":18,"content":19},"AngularFire","\u003Cp>AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic\n\u003Ca href=\"/projects/firebase/firebase-js-sdk/\">Firebase JS SDK\u003C/a> & aims to provide a more natural developer experience\nby conforming to Angular conventions.\u003C/p>\u003Cp>\u003Cstrong>\u003C/strong>\u003C/p>\u003Cpre>\u003Cstrong>ng add @angular/fire\u003C/strong>\u003C/pre>\u003Cp>\u003C/p>\u003Cul>\n\u003Cli>\u003Cstrong>Dependency injection\u003C/strong> - Provide and Inject Firebase services in your components.\u003C/li>\n\u003Cli>\u003Cstrong>Zone.js wrappers\u003C/strong> - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering.\u003C/li>\n\u003Cli>\u003Cstrong>Observable based\u003C/strong> - Utilize RxJS rather than callbacks for real-time streams.\u003C/li>\n\u003Cli>\u003Cstrong>NgRx friendly API\u003C/strong> - Integrate with NgRx using AngularFire's action based APIs.\u003C/li>\n\u003Cli>\u003Cstrong>Lazy-loading\u003C/strong> - AngularFire dynamically imports much of Firebase, reducing the time to load your app.\u003C/li>\n\u003Cli>\u003Cstrong>Deploy schematics\u003C/strong> - Get your Angular application deployed on Firebase Hosting with a single command.\u003C/li>\n\u003Cli>\u003Cstrong>Google Analytics\u003C/strong> - Zero-effort Angular Router awareness in Google Analytics.\u003C/li>\n\u003Cli>\u003Cstrong>Router Guards\u003C/strong> - Guard your Angular routes with built-in Firebase Authentication checks.\u003C/li>\n\u003C/ul>",[21,26,31],{"name":22,"content":23,"id":24,"ref":25},"Example use","\u003Cpre>\u003Ccode class=\"lang-ts prettyprint\">import { provideFirebaseApp, initializeApp } from '@angular/fire/app';\nimport { getFirestore, provideFirestore } from '@angular/fire/firestore';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideFirebaseApp(() => initializeApp({ ... })),\n    provideFirestore(() => getFirestore()),\n    ...\n  ],\n  ...\n})\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"lang-ts prettyprint\">import { AsyncPipe } from '@angular/common';\nimport { inject } from '@angular/core';\nimport { Firestore, collectionData, collection } from '@angular/fire/firestore';\n\ninterface Item {\n  name: string,\n  ...\n};\n\n@Component({\n  selector: 'app-root',\n  template: `\n  <ul>\n    @for (item of (item$ | async); track item) {\n      <li>\n        {{ item.name }}\n      </li>\n    }\n  </ul>\n  `,\n  imports: [AsyncPipe]\n})\nexport class AppComponent {\n  firestore = inject(Firestore);\n  itemCollection = collection(this.firestore, 'items');\n  item$ = collectionData<Item>(itemCollection);\n}\n\u003C/code>\u003C/pre>","example_use","#example_use",{"name":27,"content":28,"id":29,"ref":30},"Resources","\u003Cp>\u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/install-and-setup.md\">Quickstart\u003C/a> - Get your first application up and running by following our quickstart guide.\u003C/p>\u003Cp>\u003Ca href=\"https://github.com/angular/angularfire2/tree/main/contributing.md\">Contributing\u003C/a>\u003C/p>\u003Cp>\u003Ca href=\"https://stackblitz.com/edit/angular-fire-start\">Stackblitz Template\u003C/a> - Remember to set your Firebase configuration in \u003Ccode>app/app.module.ts\u003C/code>.\u003C/p>\u003Cp>\u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/version-7-upgrade.md\">Upgrading from v6.0? Check out our guide.\u003C/a>\u003C/p>\u003Ch3 id=\"sample-app\">Sample app\u003C/h3>\u003Cp>The \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/sample\">\u003Ccode>sample\u003C/code>\u003C/a> folder contains a kitchen sink application that demonstrates use of the "modular" API, in a zoneless server-rendered application, with all the bells and whistles.\u003C/p>\u003Ch3 id=\"having-troubles-\">Having troubles?\u003C/h3>\u003Cp>Get help on our \u003Ca href=\"https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A\">Q&A board\u003C/a>, the official \u003Ca href=\"https://groups.google.com/forum/#!forum/firebase-talk\">Firebase Mailing List\u003C/a>, the \u003Ca href=\"https://firebase.community/\">Firebase Community Slack\u003C/a> (\u003Ccode>#angularfire2\u003C/code>), the \u003Ca href=\"http://discord.gg/angular\">Angular Community Discord\u003C/a> (\u003Ccode>#firebase\u003C/code>), \u003Ca href=\"https://gitter.im/angular/angularfire2\">Gitter\u003C/a>, the \u003Ca href=\"https://www.reddit.com/r/firebase\">Firebase subreddit\u003C/a>, or \u003Ca href=\"https://stackoverflow.com/questions/tagged/angularfire2\">Stack Overflow\u003C/a>.\u003C/p>\u003Cblockquote>\n\u003Cp>\u003Cstrong>NOTE:\u003C/strong> While relatively stable, AngularFire is a \u003Ca href=\"https://angular.io/guide/releases#developer-preview\">developer preview\u003C/a> and is subject to change before general availability. Questions on the mailing list and issues filed here are answered on a \u003Cstrong>best-effort basis\u003C/strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase \u003Cem>outside of AngularFire's implementation\u003C/em>, please \u003Ca href=\"https://github.com/firebase/firebase-js-sdk/issues\">file an issue on the Firebase JS SDK\u003C/a> or reach out to the personalized \u003Ca href=\"https://firebase.google.com/support/\">Firebase support channel\u003C/a>.\u003C/p>\n\u003C/blockquote>","resources","#resources",{"name":32,"content":33,"id":34,"ref":35},"Developer Guide","\u003Cp>This developer guide assumes you're using the new tree-shakable AngularFire API, \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/compat.md\">if you're looking for the compatibility API you can find the documentation here\u003C/a>.\u003C/p>\u003Cp>\u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/version-7-upgrade.md\">See the v7 upgrade guide for more information on this change.\u003C/a>.\u003C/p>\u003Ch3 id=\"firebase-product-integrations\">Firebase product integrations\u003C/h3>\u003Ctable>\n  \u003Ctbody>\u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/analytics.md#analytics\">Analytics\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/analytics';\u003C/code>\n\u003C/td>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/auth.md#authentication\">Authentication\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/auth';\u003C/code>\n\u003C/td>\n  \u003C/tr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/firestore.md#cloud-firestore\">Cloud Firestore\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/firestore';\u003C/code>\n\u003C/td>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/functions.md#cloud-functions\">Cloud Functions\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/functions';\u003C/code>\n\u003C/td>\n  \u003C/tr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/messaging.md#cloud-messaging\">Cloud Messaging\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/messaging';\u003C/code>\n\u003C/td>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/storage.md#cloud-storage\">Cloud Storage\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/storage';\u003C/code>\n\u003C/td>\n  \u003C/tr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/performance.md#performance-monitoring\">Performance Monitoring\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/performance';\u003C/code>\n\u003C/td>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/database.md#realtime-database\">Realtime Database\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/database';\u003C/code>\n\u003C/td>\n  \u003C/tr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/remote-config.md#remote-config\">Remote Config\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/remote-config';\u003C/code>\n\u003C/td>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/app-check.md#app-check\">App Check\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/app-check';\u003C/code>\n\u003C/td>\n  \u003C/tr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https://github.com/angular/angularfire2/tree/main/docs/vertexai.md#vertex-ai\">Vertex AI\u003C/a>\n\u003Ccode>ts\nimport { } from '@angular/fire/vertexai';\u003C/code>\n\u003C/td>\n\n  \u003C/tr>\n\u003C/tbody>\u003C/table>","developer_guide","#developer_guide",1775544939675]