{"id":15490477,"url":"https://github.com/blaugold/angular-firebase","last_synced_at":"2025-04-22T19:08:12.654Z","repository":{"id":89741983,"uuid":"72855666","full_name":"blaugold/angular-firebase","owner":"blaugold","description":"Docs: https://blaugold.github.io/angular-firebase/","archived":false,"fork":false,"pushed_at":"2017-03-24T22:56:18.000Z","size":759,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T10:11:01.448Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blaugold.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-04T14:37:19.000Z","updated_at":"2019-06-29T01:40:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"86098d46-d702-4275-96ba-de92a19931b6","html_url":"https://github.com/blaugold/angular-firebase","commit_stats":{"total_commits":87,"total_committers":1,"mean_commits":87.0,"dds":0.0,"last_synced_commit":"4de0c184ab5fe8d75e05721ece8e8a80bad718d1"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaugold%2Fangular-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaugold%2Fangular-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaugold%2Fangular-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaugold%2Fangular-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blaugold","download_url":"https://codeload.github.com/blaugold/angular-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250002326,"owners_count":21359095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T07:21:33.992Z","updated_at":"2025-04-22T19:08:12.624Z","avatar_url":"https://github.com/blaugold.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Angular Firebase\n\n[![CircleCI](https://circleci.com/gh/blaugold/angular-firebase.svg?style=svg\u0026circle-token=bf5f61f7f9737852ea53e4e80981312624078636)](https://circleci.com/gh/blaugold/angular-firebase)\n\nWrapper around Firebase Web-API for Angular Apps.\n\nMost methods found in the Firebase API are present and work the same. For this reason they are not\ndocumented extensively. The Firebase [Guide](https://firebase.google.com/docs/web/setup) and \n[Reference](https://firebase.google.com/docs/reference/) will help understanding how to use the \nlibrary.\n\nThe library runs Firebase calls inside zone.js to make change detection work. It is focused on \nobservables and returns them for every operation. To make working with observables and \nFirebase easier, the returned observables are extended with helper operators and aliases to snapshot \nmethods.\n\nThe library support type checking of a database schema to let the compiler catch misspellings and\nwrong access patterns.\n\nAt the moment Auth and Database are implemented.\n\n**[Reference](https://blaugold.github.io/angular-firebase/index.html)**\n\n## Installation\n\n```\n    npm i --save @blaugold/angular-firebase\n```\n\n## Usage\nFor most apps, which only use one firebase project, add the `FirebaseModule` to your root module.\n\n```typescript\nimport { NgModule } from '@angular/core'\nimport { FirebaseModule } from '@blaugold/angular-firebase'\n\n@NgModule({\n    imports: [\n        FirebaseModule.primaryApp({\n            options: {\n                apiKey: '\u003cyour-api-key\u003e',\n                authDomain: '\u003cyour-auth-domain\u003e',\n                databaseURL: '\u003cyour-database-url\u003e',\n                storageBucket: '\u003cyour-storage-bucket\u003e',\n                messagingSenderId: '\u003cyour-messaging-sender-id\u003e'\n            }\n        })\n    ]\n})\nexport class AppModule {}\n```\n\nIn your service or component inject `FirebaseDatabase` and `FirebaseAuth`:\n\n```typescript\nimport { Injectable } from '@angular/core'\nimport { FirebaseDatabase } from '@blaugold/angular-firebase'\nimport { Observable } from 'rxjs/Observable'\n\nconst todoLists = 'todoLists'\n\n@Injectable()\nexport class TodoService {\n\n    constructor(private db: FirebaseDatabase\u003cany\u003e) {}\n    \n    addItem(listId: string, item: TodoItem): Observable\u003cvoid\u003e {\n        return this.db.ref(todoLists).child(listId).push()\n            .mergeMap(ref =\u003e {\n                // Add key as id to item for easier access to id in components\n                item.id = ref.key\n                return ref.set(item)\n            })\n    }\n    \n    // Returns observable of array of 10 last TodoItems \n    onList(listId: string): Observable\u003cTodoItem[]\u003e {\n        return this.db.ref(todoLists).child(listId)\n            .limitToLast(10)\n            // Emits list every time there is a change.\n            .onValue()\n            // Calls .val() on all children and returns them in an array.\n            .toValArray\u003cTodoItem\u003e()\n    }\n}\n```\n\nTo use a database schema define interfaces representing the structure of your tree.\n\n```typescript\nimport { Injectable } from '@angular/core'\nimport { FirebaseDatabase } from '@blaugold/angular-firebase'\nimport { Observable } from 'rxjs/Observable'\n\nexport interface UserData {\n  name: string\n  email: string\n  signedUpAt: number\n}\n\nexport interface DatabaseSchema {\n  users: {\n    [uid: string]: UserData\n  }\n}\n\n@Injectable()\nexport class UserService {\n\n  constructor(private db: FirebaseDatabase\u003cDatabaseSchema\u003e) {}\n    \n  // It is important to either use `db.ref()` without any argument or alternatively declare \n  // the type of the part of the tree the ref points to: `db.ref\u003cUserData\u003e('/users/1')`\n\n  getUserName(uid: string): Observable\u003cstring\u003e {\n    // No compile error\n    return this.db.ref().child('users').child(uid).child('name').val()\n  }\n  \n  getUserEmail(uid: string): Observable\u003cstring\u003e {\n    // 'user' does not exist at that location in the schema so compiler will complain.  \n    return this.db.ref().child('user').child(uid).child('email').val()\n  }\n}\n```\n\nThe api mirrors closely how the Firebase Web-API works. The biggest difference is that all \noperations return observables. To get an overview of the api, take a look at [`FirebaseDatabaseRef`](https://blaugold.github.io/angular-firebase/classes/firebasedatabaseref.html), [`DataSnapshotObservable`](https://blaugold.github.io/angular-firebase/classes/datasnapshotobservable.html), [`FirebaseAuth`](https://blaugold.github.io/angular-firebase/classes/firebaseauth.html) and [`FirebaseDatabase`](https://blaugold.github.io/angular-firebase/classes/firebasedatabase.html).\n\n## Multiple Projects\nFor every project a `FirebaseApp` instance is created. The default project app is injected when\nrequesting `FirebaseApp`. The default app's `FirebaseDatabase` and `FirebaseAuth`\nare available like this as well. To setup additional apps use `FirebaseModule.secondaryApp` and pass\nan `InjectionToken` which then can be used to inject the app in services, components, etc.:\n\n```typescript\nimport { InjectionToken, NgModule, Component, Inject } from '@angular/core'\nimport { FirebaseModule, FirebaseApp, FirebaseDatabase, FirebaseAuth } from '@blaugold/angular-firebase'\n\nconst secondAppToken = new InjectionToken('Second App')\n\n@NgModule({\n    imports: [\n        FirebaseModule.secondaryApp(secondAppToken, {\n            options: {...}\n        }),\n        FirebaseModule.primaryApp({\n            options: {...}\n        })\n    ]\n})\nexport class AppModule {}\n\n@Component(...)\nclass AppComponent {\n    \n    constructor(@Inject(secondAppToken) app: FirebaseApp,\n                defaultApp: FirebaseApp,\n                defaultDb: FirebaseDatabase,\n                defaultAuth: FirebaseAuth) {\n        const db = app.database()\n        const auth = app.auth()\n    }\n    \n}\n```\n \n## Operation Invocation\nSince the library focuses on observables all operations are invoked lazily as is usually the case \nwith observables. This means for example, calling `someRef.set({ foo: 'bar' })` will do nothing \nwithout either subscribing to the returned observable or calling `toPromise()` on it.\n\nThis is in contrast to the Firebase Web-API which starts the operation when the function is\ncalled. It is possible to globally configure the library to behave like the native Firebase Web-API\nby calling `setLazyInvocation(false)`\n\n## TODO\n- wrap onDisconnect class to include methods in change detection\n- Storage\n- Messaging\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaugold%2Fangular-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblaugold%2Fangular-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaugold%2Fangular-firebase/lists"}