Updating callable functions documentation

docs/functions/functions.md

@@ -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.
@@ -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