Updating callable functions documentation

In `app.module.ts` I put in commented out lines anticipating AngularFire 7. When AngularFire 7 is available for callable functions we can easily update the documentation with a few clicks. I also put in two lines showing how to run your functions in the Firebase emulator. I clearly indicated how to comment out these lines to run your functions in the cloud. I made an HTML view to show how to handle user input. Also I added a second set of curly brackets to `{{ data$ | async }}`. This is necessary to make the code run without throwing errors. In `app.component.ts` I put in lines anticipating AngularFire 7. I moved the template to an HTML view. I added a variable `data$` to handle the data returned from the cloud function. I added `this` to `fns.httpsCallable('my-fn-name');`. These changes are necessary to make the code run without throwing errors. I changed `fns` to `functions` for readability. I made two functions, one that executes on page load and the user executes on user input. I put in the `index.js` file showing the cloud functions. The old documentation was confusing as to what data went from Angular to the cloud function and what data was returned from the cloud function. Showing the `index.js` functions clarifies this. I've written a longer tutorial at https://github.com/tdkehoe/Firebase-Cloud-Functions-with-Angular/blob/main/README.md. When can we expect to use AngularFire 7 with callable functions?
angular · tdkehoe · Oct 14, 2022 · Oct 14, 2022 · e9200a73395a6e4be4cd552e46e6f8ffc4996390
commit e9200a73395a6e4be4cd552e46e6f8ffc4996390
diff --git a/docs/functions/functions.md b/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