@angular/fire 16.0.0-canary.e04cd7f → 16.0.0

package/docs/compat/functions/functions.md

@@ -0,0 +1,166 @@
+# AngularFireFunctions
+
+> The Cloud Functions for Firebase client SDKs let you call functions directly from a Firebase app. To call a function from your app in this way, write and deploy an HTTPS Callable function in Cloud Functions, and then add client logic to call the function from your app.
+
+> **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 Functions for AngularFire is contained in the `@angular/fire/functions` module namespace. Import the `AngularFireFunctionsModule` in your `NgModule`. This sets up the `AngularFireFunction` 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 { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireFunctionsModule
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### Injecting the AngularFireFunctions service
+
+Once the `AngularFireFunctionsModule` is registered you can inject the `AngularFireFunctions` service.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireFunctions } from '@angular/fire/compat/functions';
+
+@Component({
+  selector: 'app-component',
+  template: ``
+})
+export class AppComponent {
+  constructor(private fns: AngularFireFunctions) { }
+}
+```
+
+### Creating a callable function
+
+AngularFireFunctions is super easy. You create a function on the server side and then "call" it by its name with the client library. 
+
+| method   |                    |
+| ---------|--------------------|
+| `httpCallable(name: string): (data: T) ` | Creates a callable function based on a function name. Returns a function that can create the observable of the http call. |
+```ts
+
+import { Component } from '@angular/core';
+import { AngularFireFunctions } from '@angular/fire/compat/functions';
+
+@Component({
+  selector: 'app-root',
+  template: `{ data$  | async }`
+})
+export class AppComponent {
+  constructor(private fns: AngularFireFunctions) { 
+    const callable = fns.httpsCallable('my-fn-name');
+    this.data$ = callable({ name: 'some-data' });
+  }
+}
+```
+
+Notice that calling `httpsCallable()` does not initiate the request. It creates a function, which when called creates an Observable, subscribe or convert it to a Promise to initiate the request.
+
+## Configuration via Dependency Injection
+
+### Functions Region
+
+Allow configuration of the Function's region by adding `REGION` to the `providers` section of your `NgModule`. The default is `us-central1`.
+
+```ts
+import { NgModule } from '@angular/core';
+import { AngularFireFunctionsModule, REGION } from '@angular/fire/compat/functions';
+
+@NgModule({
+  imports: [
+    ...
+    AngularFireFunctionsModule,
+    ...
+  ],
+  ...
+  providers: [
+   { provide: REGION, useValue: 'asia-northeast1' }
+  ]
+})
+export class AppModule {}
+
+```
+
+### Cloud Functions emulator
+
+Point callable Functions to the Cloud Function emulator by adding `USE_EMULATOR` to the `providers` section of your `NgModule`.
+
+```ts
+import { NgModule } from '@angular/core';
+import { AngularFireFunctionsModule, USE_EMULATOR } from '@angular/fire/compat/functions';
+
+@NgModule({
+  imports: [
+    ...
+    AngularFireFunctionsModule,
+    ...
+  ],
+  ...
+  providers: [
+   { provide: USE_EMULATOR, useValue: ['localhost', 5001] }
+  ]
+})
+export class AppModule {}
+
+```
+
+[Learn more about integration with the Firebase Emulator suite on our dedicated guide here](../emulators/emulators.md).
+
+### Firebase Hosting integration
+
+If you serve your app using [Firebase Hosting](https://firebase.google.com/docs/hosting/), you can configure Functions to be served from the same domain as your app. This will avoid an extra round-trip per function call due to [CORS preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request). This only applies to sites hosted via firebase on `us-central1`.
+
+To set this up, you first need to update your `hosting` section in `firebase.json` and add one `rewrite` rule per function:
+
+```json
+  "hosting": {
+    "rewrites": [
+      {
+        "source": "/someFunction",
+        "function": "someFunction"
+      },
+      {
+        "source": "/anotherFunction",
+        "function": "anotherFunction"
+      },
+      ...
+    ]
+  }
+```
+
+Deploy your hosting project to the new settings go into effect, finally configure functions origin to point at your app domain:
+
+```ts
+import { NgModule } from '@angular/core';
+import { AngularFireFunctionsModule, ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/compat/functions';
+
+@NgModule({
+  imports: [
+    ...
+    AngularFireFunctionsModule,
+    ...
+  ],
+  ...
+  providers: [
+   { provide: NEW_ORIGIN_BEHAVIOR, useValue: true },
+   { provide: ORIGIN, useValue: 'https://project-name.web.app' }
+  ]
+})
+export class AppModule {}
+
+```

package/docs/compat/messaging/messaging.md

@@ -0,0 +1,232 @@
+# AngularFireMessaging
+
+> The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
+
+> **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).
+
+### AngularFireMessaging is not out-of-the-box compatible with the Angular Service Worker
+
+If you are using the Angular Service Worker, you are not currently able to use AngularFireMessaging out-of-the-box.
+If you'd like this feature please add your 👍 to [this issue](https://github.com/angular/angular/issues/34352).
+
+Your alternatives are to use
+- [WorkboxJS](https://developers.google.com/web/tools/workbox/)
+- Follow the discussion in [this issue](https://github.com/angular/angular/issues/34352) and [here](https://github.com/angular/angularfire/discussions/1923), manually registering the Angular Service Worker
+- The Firebase Messaging Service Worker, which is detailed below
+
+### Import the `NgModule`
+
+Push Notifications for AngularFire are contained in the `@angular/fire/messaging` module namespace. Import the `AngularFireMessagingModule` in your `NgModule`. This sets up the `AngularFireMessaging` 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 { AngularFireMessagingModule } from '@angular/fire/compat/messaging';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireMessagingModule
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### Setting up the Firebase Messaging Service Worker
+
+There are two parts to Firebase Messaging, a Service Worker and the DOM API. AngularFireMessaging allows you to request permission, get tokens, delete tokens, and subscribe to messages on the DOM side. To register to receive notifications you need to set up the Service Worker. [The official Firebase documentation for setting up the details exactly how to do that](https://firebase.google.com/docs/cloud-messaging/js/client). 
+
+You can either use the `firebase-messaging-sw.js` file provided in the docs or you can set your own Service Worker to import that script. Make sure to set up your `angular.json` file to copy over the Service Worker file:
+
+```json
+  "assets": [
+    "assets",
+    "favicon.ico",
+    "firebase-messaging-sw.js",
+    "manifest.json"
+  ],
+```
+
+[Warning] Remember update the `firebase-messaging-sw.js` everytime you update the `firebase` in package.json. The missmatch version could lead to unable to receive notification in `foreground`, you can create your `firebase-messaging-sw.js` like this:
+
+```js
+// Give the service worker access to Firebase Messaging.
+// Note that you can only use Firebase Messaging here, other Firebase libraries
+// are not available in the service worker.
+importScripts('https://www.gstatic.com/firebasejs/[the number of version matching with firebase in package.json]/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/[for example: 7.16.1]/firebase-messaging.js');
+
+// Initialize the Firebase app in the service worker by passing in the
+// messagingSenderId.
+
+firebase.initializeApp({
+    apiKey: '<your-key>',
+    authDomain: '<your-project-authdomain>',
+    databaseURL: '<your-database-URL>',
+    projectId: '<your-project-id>',
+    storageBucket: '<your-storage-bucket>',
+    messagingSenderId: '<your-messaging-sender-id>'
+});
+
+// Retrieve an instance of Firebase Messaging so that it can handle background
+// messages.
+const messaging = firebase.messaging();
+
+
+```
+
+### Requesting permission
+
+Once you have the Firebase Messaging Service Worker set up and installed, you need to request permission to send a user notifications. While the browser will popup a UI for you, it is highly recommend to ask the user for permission with a custom UI and only ask when it makes sense. If you blindly ask for permission, you have an extremely high chance of getting denied or blocked.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button (click)="requestPermission()">
+    Hello this is a chat app. You should let us send you notifications for this reason.
+  </button>
+  `
+})
+export class AppComponent {
+  constructor(private afMessaging: AngularFireMessaging) { }
+  requestPermission() {
+    this.afMessaging.requestPermission
+      .subscribe(
+        () => { console.log('Permission granted!'); },
+        (error) => { console.error(error); },  
+      );
+  }
+}
+```
+
+Once you have the permission of the user, you need their token. You can do this with the `getToken` observable or the `tokenChanges` observable. The `tokenChanges` observable listens for token refreshes whereas the `getToken` observable is a one-time call.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+import { mergeMapTo } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button (click)="requestPermission()">
+    Hello this is a chat app. You should let us send you notifications for this reason.
+  </button>
+  `
+})
+export class AppComponent {
+  constructor(private afMessaging: AngularFireMessaging) { }
+  requestPermission() {
+    this.afMessaging.requestPermission
+      .pipe(mergeMapTo(this.afMessaging.tokenChanges))
+      .subscribe(
+        (token) => { console.log('Permission granted! Save to the server!', token); },
+        (error) => { console.error(error); },  
+      );
+  }
+}
+```
+
+Once you have a user's token, you need to save it to the server in order to send them notifications in response to events. Let's say you want to send a push each time a user sends a chat message. Once a user grants permission, you can send the token to the Realtime Database or Cloud Firestore and associate it with a unique id, like a Firebase Auth UID. You can then create a Cloud Function trigger that looks up the user's token when a chat message is created.
+
+### Shortcutting token requests
+
+An easier way of requesting permission and getting tokens is with the `requestToken` observable. It combines the two steps above into one observable.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button (click)="requestPermission()">
+    Hello this is a chat app. You should let us send you notifications for this reason.
+  </button>
+  `
+})
+export class AppComponent {
+  constructor(private afMessaging: AngularFireMessaging) { }
+  requestPermission() {
+    this.afMessaging.requestToken
+      .subscribe(
+        (token) => { console.log('Permission granted! Save to the server!', token); },
+        (error) => { console.error(error); },  
+      );
+  }
+}
+```
+
+The `requestToken` observable uses the `tokenChanges` observable to listen to refreshes.
+
+### Deleting tokens
+
+Need to delete a user's token? Not a problem.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+import { mergeMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button (click)="deleteToken()">
+    Delete my token
+  </button>
+  `
+})
+export class AppComponent {
+  constructor(private afMessaging: AngularFireMessaging) { }
+  deleteToken() {
+    this.afMessaging.getToken
+      .pipe(mergeMap(token => this.afMessaging.deleteToken(token)))
+      .subscribe(
+        (token) => { console.log('Token deleted!'); },
+      );
+  }
+}
+```
+
+The code above requests the current user's token and passes it to the `deleteToken()` observable.
+
+### Subscribing to foreground messages
+
+Once you have a user's token and they are subscribed, you can listen to messages in the foreground. The Firebase Messaging Service Worker handles background push notifications.
+
+```ts
+import { Component } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button (click)="listen()">
+    Get notified!
+  </button>
+  `
+})
+export class AppComponent {
+  constructor(private afMessaging: AngularFireMessaging) { }
+  listen() {
+    this.afMessaging.messages
+      .subscribe((message) => { console.log(message); });
+  }
+}
+```
+
+### Sending notifications
+
+[Sending a notification](https://firebase.google.com/docs/cloud-messaging/js/first-message) requires a call to a server. You can do this directly with an HTTP call or you can even build a Cloud Function to do this in response to an event. A Cloud Function trigger is ideal because you have trusted access to the database and can securely look up tokens to send to the right user. If you want to send push notifications via HTTP requests you'll need to secure the API call. This is usually done with a Firebase Auth UID. On the server you can verify the UID with the Firebase Admin SDK and allow access to get a user's push id.
+
+The [Firebase Admin SDK has helper functions for sending notifications](https://firebase.google.com/docs/cloud-messaging/admin/send-messages) to the user and subscribing them to topics, which [simplifies sending grouped messages](https://firebase.google.com/docs/cloud-messaging/admin/manage-topic-subscriptions).

package/docs/compat/performance/getting-started.md

@@ -0,0 +1,132 @@
+# Getting started with Performance Monitoring
+
+> **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).
+
+## Automatic page load tracing
+
+Understand your Angular application's real-world performance with [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon). Performance Monitoring automatically provides a trace for **page load** when you add `AngularFirePerformanceModule` into your App Module's imports.
+
+```ts
+import { AngularFireModule } from '@angular/fire/compat';
+import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/compat/performance';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirePerformanceModule,
+    ...
+  ],
+  providers: [
+    PerformanceMonitoringService
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+The page load trace breaks down into the following default metrics:
+
+* [first paint traces](https://firebase.google.com/docs/perf-mon/automatic-web#first-paint) — measure the time between when the user navigates to a page and when any visual change happens
+* [first contentful paint traces](https://firebase.google.com/docs/perf-mon/automatic-web#contentful-paint) — measure the time between when a user navigates to a page and when meaningful content displays, like an image or text
+* [domInteractive traces](https://firebase.google.com/docs/perf-mon/automatic-web#domInteractive) — measure the time between when the user navigates to a page and when the page is considered interactive for the user
+* [domContentLoadedEventEnd traces](https://firebase.google.com/docs/perf-mon/automatic-web#domContentLoaded) — measure the time between when the user navigates to a page and when the initial HTML document is completely loaded and parsed
+* [loadEventEnd traces](https://firebase.google.com/docs/perf-mon/automatic-web#loadEventEnd) — measure the time between when the user navigates to the page and when the current document's load event completes
+* [first input delay traces](https://firebase.google.com/docs/perf-mon/automatic-web#input-delay) — measure the time between when the user interacts with a page and when the browser is able to respond to that input
+* **Angular specific traces** - `PerformanceMonitoringService` will measure the time needed for `ApplicationRef.isStable` to be true, an important metric to track if you're concerned about solving Zone.js issues for proper functionality of NGSW and Server Side Rendering
+
+### Measuring First Input Delay
+
+> First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. [See the article on the Google Developer's Blog for more information on FID.](https://developers.google.com/web/updates/2018/05/first-input-delay)
+
+In order to track first input delay, you'll want to [polyfill the browser performance API](https://github.com/GoogleChromeLabs/first-input-delay):
+
+`npm install --save-dev first-input-delay`
+
+Then add `import 'first-input-delay';` to your `src/polyfills.ts`.
+
+## Manual traces
+
+You can inject `AngularFirePerformance` to perform manual traces.
+
+```ts
+constructor(private performance: AngularFirePerformance) {}
+
+...
+
+const trace = await this.performance.trace('some-trace');
+trace.start();
+...
+trace.stop();
+```
+
+## RXJS operators
+
+AngularFire provides a number of RXJS operators which wrap the User Timing API. These are picked up by performance monitoring tools such as Chrome Inspector and Firebase Performance Monitoring.
+
+```ts
+import { trace } from '@angular/fire/compat/performance';
+
+...
+
+constructor(private performance: AngularFirePerformance, private afs: AngularFirestore) {}
+
+ngOnInit() {
+  this.articles = afs.collection('articles')
+      .collection('articles', ref => ref.orderBy('publishedAt', 'desc'))
+      .snapshotChanges()
+      .pipe(
+        // measure the amount of time between the Observable being subscribed to and first emission (or completion)
+        trace('getArticles'),
+        map(articles => ...)
+      );
+}
+```
+
+### `trace(name: string)`
+
+The most basic operator, `trace` will measure the amount of time it takes for your observable to either complete or emit its first value. Beyond the basic trace there are several other operators:
+
+<h3>
+<pre>
+traceUntil(
+  name: string,
+  test: (T) => Boolean,
+  options?: { orComplete?: true }
+)
+</pre>
+</h3>
+
+Trace the observable until the first emission that passes the provided test.
+
+If the `orComplete` option is passed it will complete the trace when the observable completes, even if an emission never passed the provided test.
+
+<h3>
+<pre>
+traceWhile(
+  name: string,
+  test: (T) => Boolean,
+  options?: { orComplete?: true }
+)
+</pre>
+</h3>
+
+Starting with an emission that passes the provided test, trace until an emission fails the test.
+
+If the `orComplete` option is passed it will complete any existing trace when the observable completes.
+
+### `traceUntilLast(name: string)`
+
+Trace the observable until completion.
+
+### `traceUntilFirst(name: string)`
+
+Traces the observable until the first emission.
+
+## Advanced usage
+
+### Configuration via Dependency Injection
+
+Set `INSTRUMENTATION_ENABLED` or `DATA_COLLECTION_ENABLED` to false disable all automatic and custom traces respectively.

package/docs/compat/remote-config/getting-started.md

@@ -0,0 +1,134 @@
+<h1>Getting started with Remote Config <em><abbr title="beta">β<abbr></em></h1>
+
+`AngularFireRemoteConfig` dynamically imports the `firebase/remote-config` library on demand, provides convenience observables, pipes, and a promisified version of the [Firebase Remote Config SDK (`firebase.remoteConfig.RemoteConfig`)](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.RemoteConfig).
+
+> **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).
+
+### API:
+
+```ts
+class AngularFireRemoteConfigModule { }
+
+interface ConfigTemplate {[key:string]: string|number|boolean}
+
+type Parameter extends remoteConfig.Value {
+  key: string,
+  fetchTimeMillis: number
+}
+
+class AngularFireRemoteConfig {
+  changes:    Observable<Parameter>;
+  parameters: Observable<Parameter[]>;
+  numbers:    Observable<{[key:string]: number|undefined}>  & {[key:string]: Observable<number>};
+  booleans:   Observable<{[key:string]: boolean|undefined}> & {[key:string]: Observable<boolean>};
+  strings:    Observable<{[key:string]: string|undefined}>  & {[key:string]: Observable<string|undefined>};
+  
+  // from firebase.remoteConfig() proxy:
+  activate: () => Promise<boolean>;
+  ensureInitialized: () => Promise<void>;
+  fetch: () => Promise<void>;
+  fetchAndActivate: () => Promise<boolean>;
+  getAll: () => Promise<{[key:string]: remoteConfig.Value}>;
+  getBoolean: (key:string) => Promise<boolean>;
+  getNumber: (key:string) => Promise<number>;
+  getString: (key:string) => Promise<string>;
+  getValue: (key:string) => Promise<remoteConfig.Value>;
+  setLogLevel: (logLevel: remoteConfig.LogLevel) => Promise<void>;
+  settings: Promise<remoteConfig.Settings>;
+  defaultConfig: Promise<{[key: string]: string | number | boolean}>;
+  fetchTimeMillis: Promise<number>;
+  lastFetchStatus: Promise<remoteConfig.FetchStatus>;
+}
+
+// Pipes for working with .changes and .parameters
+filterRemote: () => MonoTypeOperatorFunction<Parameter | Parameter[]>
+filterFresh: (interval: number) => MonoTypeOperatorFunction<Parameter | Parameter[]>
+budget: <T>(interval: number) => MonoTypeOperatorFunction<T>
+
+// scanToObject is for use with .changes
+scanToObject: () => OperatorFunction<Parameter, {[key: string]: string|undefined}>
+
+// mapToObject is the same behavior as scanToObject but for use with .parameters
+mapToObject: () => OperatorFunction<Parameter[], {[key: string]: string|undefined}>
+
+SETTINGS = InjectionToken<remoteConfig.Settings>;
+DEFAULTS = InjectionToken<ConfigTemplate>;
+```
+
+## Configuration with Dependency Injection
+
+### Configure Remote Config with `SETTINGS`
+
+Using the `SETTINGS` DI Token (*default: {}*) will allow you to [configure Firebase Remote Config](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.Settings.html).
+
+### Configure default values with  `DEFAULTS`
+
+Providing `DEFAULTS ({[key: string]: string | number | boolean})` tells `AngularFireRemoteConfig` to emit the provided defaults first. This allows you to count on Remote Config when the user is offline or in environments that the Remote Config service does not handle (i.e. Server Side Rendering).
+
+## Putting it all together
+
+```ts
+import { AngularFireRemoteConfigModule, DEFAULTS, SETTINGS } from '@angular/fire/compat/remote-config';
+
+@NgModule({
+  imports: [
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireRemoteConfigModule
+  ],
+  providers: [
+    { provide: DEFAULTS, useValue: { enableAwesome: true } },
+    {
+      provide: SETTINGS,
+      useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {}
+    }
+  ]
+})
+export class AppModule { }
+
+...
+
+constructor(remoteConfig: AngularFireRemoteConfig) {
+  remoteConfig.changes.pipe(
+    filterFresh(172_800_000), // ensure we have values from at least 48 hours ago
+    first(),
+    // scanToObject when used this way is similar to defaults
+    // but most importantly smart-casts remote config values and adds type safety
+    scanToObject({
+      enableAwesome: true,
+      titleBackgroundColor: 'blue',
+      titleFontSize: 12
+    })
+  ).subscribe(…);
+
+  // all remote config values cast as strings
+  remoteConfig.strings.subscribe(...)
+  remoteConfig.booleans.subscribe(...); // as booleans
+  remoteConfig.numbers.subscribe(...); // as numbers
+
+  // convenience for observing a single string
+  remoteConfig.strings.titleBackgroundColor.subscribe(...);
+  remoteConfig.booleans.enableAwesome.subscribe(...); // boolean
+  remoteConfig.numbers.titleBackgroundColor.subscribe(...); // number
+
+  // however those may emit more than once as the remote config cache fires and gets fresh values
+  // from the server. You can filter it out of .changes for more control:
+  remoteConfig.changes.pipe(
+    filter(param => param.key === 'titleBackgroundColor'),
+    map(param => param.asString())
+    // budget at most 800ms and return the freshest value possible in that time
+    // our budget pipe is similar to timeout but won't error or abort the pending server fetch
+    // (it won't emit it, if the deadline is exceeded, but it will have been fetched so can use the
+    // freshest values on next subscription)
+    budget(800),
+    last()
+  ).subscribe(...)
+
+  // just like .changes, but scanned into an array
+  remoteConfig.parameters.subscribe(all => ...);
+
+  // or make promisified firebase().remoteConfig() calls direct off AngularFireRemoteConfig
+  // using our proxy
+  remoteConfig.getAll().then(all => ...);
+  remoteConfig.lastFetchStatus.then(status => ...);
+}
+```