Oct 14, 2022
diff --git a/docs/functions/functions.md b/docs/functions/functions.md
 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 { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';

 // AngularFire 7
 // import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 // import { provideFirestore, getFirestore } from '@angular/fire/firestore';
 // import { provideFunctions, getFunctions, connectFunctionsEmulator } from '@angular/fire/functions'; // https://firebase.google.com/docs/emulator-suite/connect_functions#instrument_your_app_to_talk_to_the_emulators

 // AngularFire 6
 import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
 import {environment } from '../environments/environment';
 import {USE_EMULATOR } from '@angular/fire/compat/functions'; // comment out to run in the cloud

 @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // AngularFire 7
    // provideFirebaseApp(() => initializeApp(environment.firebase)),
    // provideFirestore(() => getFirestore()),
    // provideFunctions(() => getFunctions()),

    // AngularFire 6
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
  providers: [
    { provide: USE_EMULATOR, useValue: ['localhost', 5001] } // comment out to run in the cloud
  ],
  bootstrap: [AppComponent]
 })
 export class AppModule {}
 export class AppModule { }
 ```

 Comment out two lines to run your functions in the cloud instead of in the Firebase emulator.

 ### Make an HTML view
 ```html
 <div>
    <button mat-raised-button color="basic" (click)='callMe()'>Call me!</button>
 </div>

 {{ data$ | async }}
 ```

 This view has a button for user input and displays the data returned from the cloud function.

 ### Injecting the AngularFireFunctions service

 Once the `AngularFireFunctionsModule` is registered you can inject the `AngularFireFunctions` service.
 | 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

 ```ts
 import { Component } from '@angular/core';

 // AngularFire 7
 // import { getApp } from '@angular/fire/app';
 // import { provideFunctions, getFunctions, connectFunctionsEmulator, httpsCallable } from '@angular/fire/functions'; // https://firebase.google.com/docs/emulator-suite/connect_functions#instrument_your_app_to_talk_to_the_emulators
 // import { Firestore, doc, getDoc, getDocs, collection, updateDoc } from '@angular/fire/firestore';

 // AngularFire 6
 import { AngularFireFunctions } from '@angular/fire/compat/functions';

 @Component({
  selector: 'app-root',
 template: `{ data$  | async }`
 templateUrl: './app.component.html',
 })
 export class AppComponent {
  constructor(private fns: AngularFireFunctions) {
    const callable = fns.httpsCallable('my-fn-name');
    this.data$ = callable({ name: 'some-data' });
  data$: any;

  constructor(private functions: AngularFireFunctions) {
    const callable = this.functions.httpsCallable('executeOnPageLoad');
    this.data$ = callable({ name: 'Charles Babbage' });
  }

  callMe() {
    console.log("Calling...");
    const callable = this.functions.httpsCallable('callMe');
    this.data$ = callable({ name: 'Ada Lovelace' });
  };
 }
 ```

 `data$` handles the data returned from the cloud function and displays the data in the view.

 The component handles two functions, one that executes on page load and another that executes on user input.

 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.

 ### Make your callable cloud functions

 ```js
 // The Cloud Functions for Firebase SDK to create Cloud Functions and set up triggers.
 const functions = require('firebase-functions');

 // The Firebase Admin SDK to access Firestore.
 const admin = require('firebase-admin');
 admin.initializeApp();

 // executes on page load
 exports.executeOnPageLoad = functions.https.onCall((data, context) => {
    console.log("The page is loaded!")
    console.log(data);
    console.log(data.name);
    // console.log(context);
    return 22
 });

 // executes on user input
 exports.callMe = functions.https.onCall((data, context) => {
    console.log("Thanks for calling!")
    console.log(data);
    console.log(data.name);
    // console.log(context);
    return 57
 });
 ```

 The first function executes when the page loads. The second function executes from user input.

 Both functions use `https.onCall((data, context) => {})`, which makes a function callable from Angular.

 `data` is the data sent from Angular. `context` is metadata about the function executing. The returned data (`22`, `57`) goes back to Angular and is displayed in the view. This data is an Observable.

 ## Configuration via Dependency Injection

 ### Functions Region
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,25 +7,58 @@
		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 { BrowserModule } from '@angular/platform-browser';
		import { AppComponent } from './app.component';
		import { environment } from '../environments/environment';

		// AngularFire 7
		// import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
		// import { provideFirestore, getFirestore } from '@angular/fire/firestore';
		// import { provideFunctions, getFunctions, connectFunctionsEmulator } from '@angular/fire/functions'; // https://firebase.google.com/docs/emulator-suite/connect_functions#instrument_your_app_to_talk_to_the_emulators

		// AngularFire 6
		import { AngularFireModule } from '@angular/fire/compat';
		import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
		import {environment } from '../environments/environment';
		import {USE_EMULATOR } from '@angular/fire/compat/functions'; // comment out to run in the cloud

		@NgModule({
		declarations: [
		AppComponent
		],
		imports: [
		BrowserModule,

		// AngularFire 7
		// provideFirebaseApp(() => initializeApp(environment.firebase)),
		// provideFirestore(() => getFirestore()),
		// provideFunctions(() => getFunctions()),

		// AngularFire 6
		AngularFireModule.initializeApp(environment.firebase),
		AngularFireFunctionsModule
		],
		declarations: [ AppComponent ],
		bootstrap: [ AppComponent ]
		providers: [
		{ provide: USE_EMULATOR, useValue: ['localhost', 5001] } // comment out to run in the cloud
		],
		bootstrap: [AppComponent]
		})
		export class AppModule {}
		export class AppModule { }
		```

		Comment out two lines to run your functions in the cloud instead of in the Firebase emulator.

		### Make an HTML view
		```html
		<div>
		<button mat-raised-button color="basic" (click)='callMe()'>Call me!</button>
		</div>

		{{ data$ \| async }}
		```

		This view has a button for user input and displays the data returned from the cloud function.

		### Injecting the AngularFireFunctions service

		Once the `AngularFireFunctionsModule` is registered you can inject the `AngularFireFunctions` service.
Expand All		@@ -50,25 +83,79 @@ AngularFireFunctions is super easy. You create a function on the server side and
		\| 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

		```ts
		import { Component } from '@angular/core';

		// AngularFire 7
		// import { getApp } from '@angular/fire/app';
		// import { provideFunctions, getFunctions, connectFunctionsEmulator, httpsCallable } from '@angular/fire/functions'; // https://firebase.google.com/docs/emulator-suite/connect_functions#instrument_your_app_to_talk_to_the_emulators
		// import { Firestore, doc, getDoc, getDocs, collection, updateDoc } from '@angular/fire/firestore';

		// AngularFire 6
		import { AngularFireFunctions } from '@angular/fire/compat/functions';

		@Component({
		selector: 'app-root',
		template: `{ data$ \| async }`
		templateUrl: './app.component.html',
		})
		export class AppComponent {
		constructor(private fns: AngularFireFunctions) {
		const callable = fns.httpsCallable('my-fn-name');
		this.data$ = callable({ name: 'some-data' });
		data$: any;

		constructor(private functions: AngularFireFunctions) {
		const callable = this.functions.httpsCallable('executeOnPageLoad');
		this.data$ = callable({ name: 'Charles Babbage' });
		}

		callMe() {
		console.log("Calling...");
		const callable = this.functions.httpsCallable('callMe');
		this.data$ = callable({ name: 'Ada Lovelace' });
		};
		}
		```

		`data$` handles the data returned from the cloud function and displays the data in the view.

		The component handles two functions, one that executes on page load and another that executes on user input.

		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.

		### Make your callable cloud functions

		```js
		// The Cloud Functions for Firebase SDK to create Cloud Functions and set up triggers.
		const functions = require('firebase-functions');

		// The Firebase Admin SDK to access Firestore.
		const admin = require('firebase-admin');
		admin.initializeApp();

		// executes on page load
		exports.executeOnPageLoad = functions.https.onCall((data, context) => {
		console.log("The page is loaded!")
		console.log(data);
		console.log(data.name);
		// console.log(context);
		return 22
		});

		// executes on user input
		exports.callMe = functions.https.onCall((data, context) => {
		console.log("Thanks for calling!")
		console.log(data);
		console.log(data.name);
		// console.log(context);
		return 57
		});
		```

		The first function executes when the page loads. The second function executes from user input.

		Both functions use `https.onCall((data, context) => {})`, which makes a function callable from Angular.

		`data` is the data sent from Angular. `context` is metadata about the function executing. The returned data (`22`, `57`) goes back to Angular and is displayed in the view. This data is an Observable.

		## Configuration via Dependency Injection

		### Functions Region
Expand Down