[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"projects\u002Fangular\u002Fangularfire2":3,"projects\u002Fangular\u002Fangularfire2\u002F: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=\"\u002Fprojects\u002Ffirebase\u002Ffirebase-js-sdk\u002F\">Firebase JS SDK\u003C\u002Fa> & aims to provide a more natural developer experience\nby conforming to Angular conventions.\u003C\u002Fp>\u003Cp>\u003Cstrong>\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Cstrong>ng add @angular\u002Ffire\u003C\u002Fstrong>\u003C\u002Fpre>\u003Cp>\u003C\u002Fp>\u003Cul>\n\u003Cli>\u003Cstrong>Dependency injection\u003C\u002Fstrong> - Provide and Inject Firebase services in your components.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Zone.js wrappers\u003C\u002Fstrong> - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Observable based\u003C\u002Fstrong> - Utilize RxJS rather than callbacks for real-time streams.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>NgRx friendly API\u003C\u002Fstrong> - Integrate with NgRx using AngularFire's action based APIs.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Lazy-loading\u003C\u002Fstrong> - AngularFire dynamically imports much of Firebase, reducing the time to load your app.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Deploy schematics\u003C\u002Fstrong> - Get your Angular application deployed on Firebase Hosting with a single command.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Google Analytics\u003C\u002Fstrong> - Zero-effort Angular Router awareness in Google Analytics.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Router Guards\u003C\u002Fstrong> - Guard your Angular routes with built-in Firebase Authentication checks.\u003C\u002Fli>\n\u003C\u002Ful>",[21,26,31],{"name":22,"content":23,"id":24,"ref":25},"Example use","\u003Cpre>\u003Ccode class=\"lang-ts prettyprint\">import { provideFirebaseApp, initializeApp } from '@angular\u002Ffire\u002Fapp';\nimport { getFirestore, provideFirestore } from '@angular\u002Ffire\u002Ffirestore';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideFirebaseApp(() => initializeApp({ ... })),\n    provideFirestore(() => getFirestore()),\n    ...\n  ],\n  ...\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"lang-ts prettyprint\">import { AsyncPipe } from '@angular\u002Fcommon';\nimport { inject } from '@angular\u002Fcore';\nimport { Firestore, collectionData, collection } from '@angular\u002Ffire\u002Ffirestore';\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      <\u002Fli>\n    }\n  <\u002Ful>\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\u002Fcode>\u003C\u002Fpre>","example_use","#example_use",{"name":27,"content":28,"id":29,"ref":30},"Resources","\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Finstall-and-setup.md\">Quickstart\u003C\u002Fa> - Get your first application up and running by following our quickstart guide.\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fcontributing.md\">Contributing\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fangular-fire-start\">Stackblitz Template\u003C\u002Fa> - Remember to set your Firebase configuration in \u003Ccode>app\u002Fapp.module.ts\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fversion-7-upgrade.md\">Upgrading from v6.0? Check out our guide.\u003C\u002Fa>\u003C\u002Fp>\u003Ch3 id=\"sample-app\">Sample app\u003C\u002Fh3>\u003Cp>The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fsample\">\u003Ccode>sample\u003C\u002Fcode>\u003C\u002Fa> 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\u002Fp>\u003Ch3 id=\"having-troubles-\">Having troubles?\u003C\u002Fh3>\u003Cp>Get help on our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire\u002Fdiscussions?discussions_q=category%3AQ%26A\">Q&A board\u003C\u002Fa>, the official \u003Ca href=\"https:\u002F\u002Fgroups.google.com\u002Fforum\u002F#!forum\u002Ffirebase-talk\">Firebase Mailing List\u003C\u002Fa>, the \u003Ca href=\"https:\u002F\u002Ffirebase.community\u002F\">Firebase Community Slack\u003C\u002Fa> (\u003Ccode>#angularfire2\u003C\u002Fcode>), the \u003Ca href=\"http:\u002F\u002Fdiscord.gg\u002Fangular\">Angular Community Discord\u003C\u002Fa> (\u003Ccode>#firebase\u003C\u002Fcode>), \u003Ca href=\"https:\u002F\u002Fgitter.im\u002Fangular\u002Fangularfire2\">Gitter\u003C\u002Fa>, the \u003Ca href=\"https:\u002F\u002Fwww.reddit.com\u002Fr\u002Ffirebase\">Firebase subreddit\u003C\u002Fa>, or \u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Fangularfire2\">Stack Overflow\u003C\u002Fa>.\u003C\u002Fp>\u003Cblockquote>\n\u003Cp>\u003Cstrong>NOTE:\u003C\u002Fstrong> While relatively stable, AngularFire is a \u003Ca href=\"https:\u002F\u002Fangular.io\u002Fguide\u002Freleases#developer-preview\">developer preview\u003C\u002Fa> 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\u002Fstrong> by maintainers and other community members. If you are able to reproduce a problem with Firebase \u003Cem>outside of AngularFire's implementation\u003C\u002Fem>, please \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffirebase\u002Ffirebase-js-sdk\u002Fissues\">file an issue on the Firebase JS SDK\u003C\u002Fa> or reach out to the personalized \u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fsupport\u002F\">Firebase support channel\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fblockquote>","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:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fcompat.md\">if you're looking for the compatibility API you can find the documentation here\u003C\u002Fa>.\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fversion-7-upgrade.md\">See the v7 upgrade guide for more information on this change.\u003C\u002Fa>.\u003C\u002Fp>\u003Ch3 id=\"firebase-product-integrations\">Firebase product integrations\u003C\u002Fh3>\u003Ctable>\n  \u003Ctbody>\u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fanalytics.md#analytics\">Analytics\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fanalytics';\u003C\u002Fcode>\n\u003C\u002Ftd>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fauth.md#authentication\">Authentication\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fauth';\u003C\u002Fcode>\n\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Ffirestore.md#cloud-firestore\">Cloud Firestore\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Ffirestore';\u003C\u002Fcode>\n\u003C\u002Ftd>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Ffunctions.md#cloud-functions\">Cloud Functions\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Ffunctions';\u003C\u002Fcode>\n\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fmessaging.md#cloud-messaging\">Cloud Messaging\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fmessaging';\u003C\u002Fcode>\n\u003C\u002Ftd>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fstorage.md#cloud-storage\">Cloud Storage\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fstorage';\u003C\u002Fcode>\n\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fperformance.md#performance-monitoring\">Performance Monitoring\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fperformance';\u003C\u002Fcode>\n\u003C\u002Ftd>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fdatabase.md#realtime-database\">Realtime Database\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fdatabase';\u003C\u002Fcode>\n\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fremote-config.md#remote-config\">Remote Config\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fremote-config';\u003C\u002Fcode>\n\u003C\u002Ftd>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fapp-check.md#app-check\">App Check\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fapp-check';\u003C\u002Fcode>\n\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n\n#### \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangularfire2\u002Ftree\u002Fmain\u002Fdocs\u002Fvertexai.md#vertex-ai\">Vertex AI\u003C\u002Fa>\n\u003Ccode>ts\nimport { } from '@angular\u002Ffire\u002Fvertexai';\u003C\u002Fcode>\n\u003C\u002Ftd>\n\n  \u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>","developer_guide","#developer_guide",1791025022729]