@angular/fire 7.6.0 → 16.0.0-canary.4172abd

package/docs/compat/rtdb/objects.md

@@ -1,182 +0,0 @@
-# 2. Retrieving data as objects
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-> The `AngularFireObject` is a service for manipulating and streaming object data.
-
-The `AngularFireObject` service is not created by itself, but through the `AngularFireDatabase` service.
-
-The guide below demonstrates how to retrieve, save, and remove data as objects.
-
-## Injecting the `AngularFireDatabase` service
-
-**Make sure you have bootstrapped your application for AngularFire. See the Installation guide for bootstrap setup.**
-
-`AngularFireDatabase` is a service which can be injected through the constructor of your Angular component or `@Injectable()` service.
-
-If you've followed the earlier step "Installation and Setup"  your `/src/app/app.component.ts` should look like below. 
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireDatabase } from '@angular/fire/compat/database';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
-})
-export class AppComponent {
-  items: Observable<any[]>;
-  constructor(db: AngularFireDatabase) {
-    this.items = db.list('items').valueChanges();
-  }
-}
-```
-
-In this section, we're going to modify the `/src/app/app.component.ts`  to retrieve data as object.
-
-## Create an object binding
-
-```ts
-const relative = db.object('item').valueChanges();
-```
-
-### Retrieve data
-
-To get the object in realtime, create an object binding as a property of your component or service.
-
-Then in your template, you can use the `async` pipe to unwrap the binding.
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireDatabase } from '@angular/fire/compat/database';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <h1>{{ (item | async)?.name }}</h1>
-  `,
-})
-export class AppComponent {
-  item: Observable<any>;
-  constructor(db: AngularFireDatabase) {
-    this.item = db.object('item').valueChanges();
-  }
-}
-```
-
-## Saving data
-
-### API Summary
-
-The table below highlights some of the common methods on the `AngularFireObject`.
-
-| method   |                    | 
-| ---------|--------------------| 
-| `set(value: T)`      | Replaces the current value in the database with the new value specified as the parameter. This is called a **destructive** update, because it deletes everything currently in place and saves the new value. | 
-| `update(value: T)`   | Updates the current value with in the database with the new value specified as the parameter. This is called a **non-destructive** update, because it only updates the values specified. |
-| `remove()`   | Deletes all data present at that location. Same as calling `set(null)`. |
-
-## Returning promises
-
-Each data operation method in the table above returns a promise. However,
-you should rarely need to use the completion promise to indicate success, 
-because the realtime database keeps the object in sync. 
-
-The promise can be useful to chain multiple operations, catching possible errors from security rules denials, or for debugging.
-
-```ts
-const promise = db.object('item').remove();
-promise
-  .then(_ => console.log('success'))
-  .catch(err => console.log(err, 'You dont have access!'));
-```
-
-### Saving data
-
-Use the `set()` method for **destructive updates**.
-
-```ts
-const itemRef = db.object('item');
-itemRef.set({ name: 'new name!'});
-```
-
-### Updating data
-
-Use the `update()` method for **non-destructive updates**.
-
-```ts
-const itemRef = db.object('item');
-itemRef.update({ age: newAge });
-```
-
-**Only objects are allowed for updates, not primitives**. This is because
-using an update with a primitive is the exact same as doing a `.set()` with a primitive.
-
-### Deleting data
-
-Use the `remove()` method to remove data at the object's location.
-
-```ts
-const itemRef = db.object('item');
-itemRef.remove();
-```
-
-**Example app**: 
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <h1>{{ item | async | json }}</h1>
-  <input type="text" #newname placeholder="Name" />
-  <input type="text" #newsize placeholder="Size" />
-  <br />
-  <button (click)="save(newname.value)">Set Name</button>
-  <button (click)="update(newsize.value)">Update Size</button>
-  <button (click)="delete()">Delete</button>
-  `,
-})
-export class AppComponent {
-  itemRef: AngularFireObject<any>;
-  item: Observable<any>;
-  constructor(db: AngularFireDatabase) {
-    this.itemRef = db.object('item');
-    this.item = this.itemRef.valueChanges();
-  }
-  save(newName: string) {
-    this.itemRef.set({ name: newName });
-  }
-  update(newSize: string) {
-    this.itemRef.update({ size: newSize });
-  }
-  delete() {
-    this.itemRef.remove();
-  }
-}
-```
-
-## Retrieving the snapshot
-
-AngularFire `valueChanges()` unwraps the Firebase DataSnapshot by default, but you can get the data as the original snapshot by using the `snapshotChanges()` option.
-
-```ts
-this.itemRef = db.object('item');
-this.itemRef.snapshotChanges().subscribe(action => {
-  console.log(action.type);
-  console.log(action.key)
-  console.log(action.payload.val())
-});
-```
-
-## Querying?
-
-Because `AngularFireObject` synchronizes objects from the realtime database, sorting will have no effect for queries that are not also limited by a range. For example, when paginating you would provide a query with a sort and filter. Both the sort operation and the filter operation affect which subset of the data is returned by the query; however, because the resulting object is simply json, the sort order will not be preseved locally. Hence, for operations that require sorting, you are probably looking for a [list](lists.md)
-
-### [Next Step: Retrieving data as lists](lists.md)

package/docs/compat/rtdb/querying-lists.md

@@ -1,155 +0,0 @@
-# 4. Querying lists
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-## Creating a query with primitive/scalar values
-
-Queries are created by building on the [`firebase.database.Reference`](https://firebase.google.com/docs/reference/js/firebase.database.Reference).
-
-```ts
-db.list('/items', ref => ref.orderByChild('size').equalTo('large'))
-```
-
-### Query options
-
-| Method   | Purpose            |
-| ---------|--------------------|
-| `orderByChild` | Specify a child to order by. |
-| `orderByKey` | Boolean to order by Firebase Database keys. |
-| `orderByValue` | Specify a value to order by. |
-| ~~`orderByPriority`~~<sup>1</sup> | Boolean to order by Firebase Database priority.|
-| `equalTo`<sup>2</sup> | Limit list to items that contain certain value. |
-| `limitToFirst` | Sets the maximum number of items to return from the beginning of the ordered list of results. |
-| `limitToLast` | Sets the maximum number of items to return from the end of the ordered list of results. |
-| `startAt`<sup>2</sup> | Return items greater than or equal to the specified key or value, depending on the order-by method chosen. |
-| `endAt`<sup>2</sup> | Return items less than or equal to the specified key or value, depending on the order-by method chosen. |
-
-<sup>1</sup> [This is the old way of doing things and is no longer recommended for use](https://youtu.be/3WTQZV5-roY?t=3m). Anything you can achieve with `orderByPriority` you should be doing with `orderByChild`.
-
-<sup>2</sup> The Firebase SDK supports an optional `key` parameter for [`startAt`](https://firebase.google.com/docs/reference/js/firebase.database.Reference#startAt), [`endAt`](https://firebase.google.com/docs/reference/js/firebase.database.Reference#endAt), and [`equalTo`](https://firebase.google.com/docs/reference/js/firebase.database.Reference#equalTo) when ordering by child, value, or priority. You can specify the `key` parameter using an object literal that contains the `value` and the `key`. For example: `startAt: { value: 'some-value', key: 'some-key' }`.
-
-To learn more about how sorting and ordering data works in Firebase, check out the Firebase documentation on [working with lists of data](https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data).
-
-## Invalid query combinations
-
-**Queries can only be ordered by one method.** This means you can only specify
-`orderByChild`, `orderByKey`, `orderByPriority`, or `orderByValue`.
-
-```ts
-// WARNING: Do not copy and paste. This will not work!
-ref.orderByChild('size').equalTo('large').orderByKey(true)
-```
-
-You can only use `limitToFirst` or `limitToLast`, but not both in combination.
-
-```ts
-// WARNING: Do not copy and paste. This will not work!
-ref.limitToFirst(10).limitToLast(100)
-```
-
-## Dynamic querying
-
-To enable dynamic queries one should lean on RxJS Operators like `switchMap`.
-
-An RxJS Subject is imported below. A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. See, [What is a Subject](http://reactivex.io/rxjs/manual/overview.html#subject) for more information.
-
-When we call [`switchMap` on the Subject](https://www.learnrxjs.io/operators/transformation/switchmap.html), we can map each value to a new Observable; in this case a database query.
-
-```ts
-const size$ = new Subject<string>();
-const queryObservable = size$.pipe(
-  switchMap(size => 
-    db.list('/items', ref => ref.orderByChild('size').equalTo(size)).valueChanges()
-  )
-);
-
-// subscribe to changes
-queryObservable.subscribe(queriedItems => {
-  console.log(queriedItems);  
-});
-
-// trigger the query
-size$.next('large');
-
-// re-trigger the query!!!
-size$.next('small');
-```
-
-**Example app:**
- 
-[See this example in action on StackBlitz](https://stackblitz.com/edit/angularfire-db-api-s8ip7m).
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireDatabase, AngularFireAction } from '@angular/fire/compat/database';
-import { Observable, Subscription, BehaviorSubject } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <h1>Firebase widgets!</h1>
-  <div *ngIf="items$ | async; let items; else loading">
-    <ul>
-      <li *ngFor="let item of items">
-        {{ item.payload.val().text }}
-        <code>{{ item.payload.key }}</code>
-      </li>
-    </ul>
-    <div *ngIf="items.length === 0">No results, try clearing filters</div>
-  </div>
-  <ng-template #loading>Loading&hellip;</ng-template>
-  <div>
-    <h4>Filter by size</h4>
-    <button (click)="filterBy('small')">Small</button>
-    <button (click)="filterBy('medium')">Medium</button>
-    <button (click)="filterBy('large')">Large</button>
-    <button (click)="filterBy('x-large')">Extra Large</button>
-    <button (click)="filterBy(null)" *ngIf="this.size$.getValue()">
-      <em>clear filter</em>
-    </button>
-  </div>
-  `,
-})
-export class AppComponent {
-  items$: Observable<AngularFireAction<firebase.database.DataSnapshot>[]>;
-  size$: BehaviorSubject<string|null>;
-  
-  constructor(db: AngularFireDatabase) {
-    this.size$ = new BehaviorSubject(null);
-    this.items$ = this.size$.pipe(
-      switchMap(size => 
-        db.list('/items', ref =>
-          size ? ref.orderByChild('size').equalTo(size) : ref
-        ).snapshotChanges()
-      )
-    );
-  }
-  filterBy(size: string|null) {
-    this.size$.next(size);
-  }
-}
-```
-
-**To run the above example as is, you need to have sample data in you firebase database with the following structure:**
- 
- ```json
-{
-  "items": {
-    "a" : {
-      "size" : "small",
-      "text" : "small thing"
-    },
-    "b" : {
-      "size" : "medium",
-      "text" : "medium sample"
-    },
-    "c" : {
-      "size" : "large",
-      "text" : "large widget"
-    }
-  }
-}
- ```
-
-### [Next Step: Getting started with Firebase Authentication](../auth/getting-started.md)

package/docs/compat/storage/storage.md

@@ -1,257 +0,0 @@
-# AngularFireStorage
-
-> Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos.
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-### Import the `NgModule`
-
-Cloud Storage for AngularFire is contained in the `@angular/fire/storage` module namespace. Import the `AngularFireStorageModule` in your `NgModule`. This sets up the `AngularFireStorage` service for dependency injection.
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire/compat';
-import { AngularFireStorageModule } from '@angular/fire/compat/storage';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFireStorageModule
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-The `BUCKET` injection token can be used to customise the storage bucket.
-
-```ts
-import {AngularFireStorageModule, BUCKET } from '@angular/fire/compat/storage';
-
-@NgModule({
-  providers: [
-    { provide: BUCKET, useValue: 'my-bucket-name' }
-  ],
-  ...
-})
-export class AppModule {}
-```
-
-### Injecting the AngularFireStorage service
-
-Once the `AngularFireStorageModule` is registered you can inject the `AngularFireStorage` service.
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
-
-@Component({
-  selector: 'app-component',
-  template: ``
-})
-export class AppComponent {
-  constructor(private storage: AngularFireStorage) { }
-}
-```
-
-### Uploading blobs
-
-There are three options for uploading files.
-
-
-| method   |                    |
-| ---------|--------------------|
-| `put(data: Blob, metadata?: storage.UploadMetadata): AngularFireUploadTask` | Starts the upload of the blob to the storage reference's path. Returns an `AngularFireUploadTask` for upload monitoring. |
-| `putString(data: string, format?: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask` | Updates an existing item in the array. Accepts a key, database reference, or an unwrapped snapshot. |
-| `upload(path: string, data: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask` | Upload or update a new file to the storage reference's path. Returns an `AngularFireUploadTask` for upload monitoring. |
-
-### Examples
-
-#### Uploading blobs with put
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <input type="file" (change)="uploadFile($event)">
-  `
-})
-export class AppComponent {
-  constructor(private storage: AngularFireStorage) { }
-  uploadFile(event) {
-    const file = event.target.files[0];
-    const filePath = 'name-your-file-path-here';
-    const ref = this.storage.ref(filePath);
-    const task = ref.put(file);
-  }
-}
-```
-
-#### Uploading blobs with putString
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <input type="file" (change)="uploadFile($event)">
-  `
-})
-export class AppComponent {
-  constructor(private storage: AngularFireStorage) { }
-  uploadFile(event) {
-    const file = event.target.files[0];
-    const filePath = 'name-your-file-path-here';
-    const ref = this.storage.ref(filePath);
-    const task = ref.putString(file);
-  }
-}
-```
-
-#### Uploading files with upload
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <input type="file" (change)="uploadFile($event)">
-  `
-})
-export class AppComponent {
-  constructor(private storage: AngularFireStorage) { }
-  uploadFile(event) {
-    const file = event.target.files[0];
-    const filePath = 'name-your-file-path-here';
-    const task = this.storage.upload(filePath, file);
-  }
-}
-```
-
-### Monitoring upload percentage
-
-An `AngularFireUploadTask` has methods for observing upload percentage as well as the final download URL.
-
-| method   |                    |
-| ---------|--------------------|
-| `snapshotChanges(): Observable<FirebaseStorage.UploadTaskSnapshot>` | Emits the raw `UploadTaskSnapshot` as the file upload progresses. |
-| `percentageChanges(): Observable<number>` | Emits the upload completion percentage. |
-| `getDownloadURL(): Observable<any>` | Emits the download url when available |
-
-#### Example Usage
-
-The method `getDownloadURL()` doesn't rely on the task anymore, hence, in order to get the url we should use the finalize method from RxJS on top of the storage ref.
-
-```ts
-import { finalize } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <input type="file" (change)="uploadFile($event)" />
-    <div>{{ uploadPercent | async }}</div>
-    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
- `
-})
-export class AppComponent {
-  uploadPercent: Observable<number>;
-  downloadURL: Observable<string>;
-  constructor(private storage: AngularFireStorage) {}
-  uploadFile(event) {
-    const file = event.target.files[0];
-    const filePath = 'name-your-file-path-here';
-    const fileRef = this.storage.ref(filePath);
-    const task = this.storage.upload(filePath, file);
-
-    // observe percentage changes
-    this.uploadPercent = task.percentageChanges();
-    // get notified when the download URL is available
-    task.snapshotChanges().pipe(
-        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
-     )
-    .subscribe()
-  }
-}
-```
-
-### Downloading Files
-
-A convenient pipe exists for simple in page references.
-
-```ts
-@Component({
-  selector: 'app-root',
-  template: `<img [src]="'users/davideast.jpg' | getDownloadURL" />`
-})
-export class AppComponent {}
-```
-
-To download a file you'll need to create a reference and call the `getDownloadURL()` method on an `AngularFireStorageReference`.
-
-```ts
-@Component({
-  selector: 'app-root',
-  template: `<img [src]="profileUrl | async" />`
-})
-export class AppComponent {
-  profileUrl: Observable<string | null>;
-  constructor(private storage: AngularFireStorage) {
-     const ref = this.storage.ref('users/davideast.jpg');
-     this.profileUrl = ref.getDownloadURL();
-  }
-}
-```
-
-### Managing Metadata
-
-Cloud Storage for Firebase allows you to upload and download metadata associated with files. This is useful because you can store important metadata and download it without needing to download the entire file.
-
-### Examples
-
-#### Downloading metadata
-
-```ts
-@Component({
-  selector: 'app-root',
-  template: `<pre><code>{{ meta | async }}</code></pre>`
-})
-export class AppComponent {
-  meta: Observable<any>;
-  constructor(private storage: AngularFireStorage) {
-     const ref = this.storage.ref('users/davideast.jpg');
-     this.meta = ref.getMetadata();
-  }
-}
-```
-
-#### Uploading metadata with files
-
-```ts
-@Component({
-  selector: 'app-root',
-  template: `
-    <input type="file" (change)="uploadFile($event)" />
- `
-})
-export class AppComponent {
-  constructor(private storage: AngularFireStorage) {}
-  uploadFile(event) {
-    const file = event.target.files[0];
-    const filePath = 'name-your-file-path-here';
-    const ref = this.storage.ref(filePath);
-    const task = ref.put(file, { customMetadata: { blah: 'blah' } });
-  }
-}
-```

package/docs/compat.md

@@ -1,70 +0,0 @@
-# AngularFire
-The official [Angular](https://angular.io/) library for [Firebase](https://firebase.google.com/).
-
-<strong><pre>ng add @angular/fire</pre></strong>
-
-## Compatibility Developer Guide
-
-AngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. [Find the new developer guide here](../README.md#developer-guide).
-
-[See the v7 upgrade guide for more information on this change.](version-7-upgrade.md).
-
-### Monitor usage of your application in production
-
-> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
-
-- [Getting started with Google Analytics](compat/analytics/getting-started.md)
-
-### Interacting with your database(s)
-
-Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
-
-#### Cloud Firestore
-
-> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
-
-- [Documents](compat/firestore/documents.md)
-- [Collections](compat/firestore/collections.md)
-- [Querying Collections](compat/firestore/querying-collections.md)
-- [Offline data](compat/firestore/offline-data.md)
-
-#### Realtime Database
-
-> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
-
-- [Objects](compat/rtdb/objects.md)
-- [Lists](compat/rtdb/lists.md)
-- [Querying lists](compat/rtdb/querying-lists.md)
-
-### Authenticate users
-
-- [Getting started with Firebase Authentication](acompat/uth/getting-started.md)
-- [Route users with AngularFire guards](compat/auth/router-guards.md)
-
-### Local Emulator Suite
-
-- [Getting started with Firebase Emulator Suite](compat/emulators/emulators.md)
-
-### Upload files
-
-- [Getting started with Cloud Storage](compat/storage/storage.md)
-
-### Receive push notifications
-
-- [Getting started with Firebase Messaging](compat/messaging/messaging.md)
-
-### **BETA:** Change behavior and appearance of your application without deploying
-
-> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
-
-- [Getting started with Remote Config](compat/remote-config/getting-started.md)
-
-### Monitor your application performance in production
-
-> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).
-
-- [Getting started with Performance Monitoring](compat/performance/getting-started.md)
-
-### Directly call Cloud Functions
-
-- [Getting started with Callable Functions](compat/functions/functions.md)