angular · Mar 18, 2023
diff --git a/‎README.md
Lines changed: 84 additions & 70 deletions b/‎README.md
Lines changed: 84 additions & 70 deletions
diff --git a/‎docs/analytics.md
Lines changed: 67 additions & 0 deletions b/‎docs/analytics.md
Lines changed: 67 additions & 0 deletions
@@ -31,6 +31,7 @@ export class AppModule { }
 ```
 
 ```ts
+import { inject } from '@angular/core';
 import { Firestore, collectionData, collection } from '@angular/fire/firestore';
 import { Observable } from 'rxjs';
 
@@ -51,8 +52,10 @@ interface Item {
 })
 export class AppComponent {
   item$: Observable<Item[]>;
-  constructor(firestore: Firestore) {
-    const collection = collection(firestore, 'items');
+  firestore: Firestore = inject(Firestore);
+
+  constructor() {
+    const itemCollection = collection(this.firestore, 'items');
     this.item$ = collectionData(collection);
   }
 }
@@ -116,86 +119,97 @@ Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?d
 
 ## Developer Guide
 
-AngularFire has a new tree-shakable API, however this is still under active development and documentation is in the works, so we suggest most developers stick with the Compatiability API for the time being. [See the v7 upgrade guide for more information.](docs/version-7-upgrade.md). 
-
-This developer guide assumes you're using the Compatiability API (`@angular/fire/compat/*`).
-
-### 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](docs/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](docs/firestore/documents.md)
-- [Collections](docs/firestore/collections.md)
-- [Querying Collections](docs/firestore/querying-collections.md)
-- [Offline data](docs/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](docs/rtdb/objects.md)
-- [Lists](docs/rtdb/lists.md)
-- [Querying lists](docs/rtdb/querying-lists.md)
-
-### Authenticate users
-
-- [Getting started with Firebase Authentication](docs/auth/getting-started.md)
-- [Route users with AngularFire guards](docs/auth/router-guards.md)
-
-### Local Emulator Suite
-
-- [Getting started with Firebase Emulator Suite](docs/emulators/emulators.md)
-
-### Upload files
-
-- [Getting started with Cloud Storage](docs/storage/storage.md)
-
-### Receive push notifications
-
-- [Getting started with Firebase Messaging](docs/messaging/messaging.md)
+This developer guide assimes you're using the new tree-shakable AngularFire API, [if you're looking for the compatability API you can find the documentation here](docs/compat.md).
 
-### **BETA:** Change behavior and appearance of your application without deploying
+[See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
 
-> 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).
+### Firebase product integrations
 
-- [Getting started with Remote Config](docs/remote-config/getting-started.md)
+<table>
+  <tr>
+    <td>
 
-### 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).
+#### [Analytics](docs/analytics.md#analytics)
+```ts
+import { } from '@angular/fire/analytics';
+```
+</td>
+    <td>
 
-- [Getting started with Performance Monitoring](docs/performance/getting-started.md)
+#### [Authentication](docs/auth.md#authentication)
+```ts
+import { } from '@angular/fire/auth';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Directly call Cloud Functions
+#### [Cloud Firestore](docs/firestore.md#cloud-firestore)
+```ts
+import { } from '@angular/fire/firestore';
+```
+</td>
+    <td>
 
-- [Getting started with Callable Functions](docs/functions/functions.md)
+#### [Cloud Functions](docs/functions.md#cloud-functions)
+```ts
+import { } from '@angular/fire/functions';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Deploying your application
+#### [Cloud Messaging](docs/messaging.md#cloud-messaging)
+```ts
+import { } from '@angular/fire/messaging';
+```
+</td>
+    <td>
 
-> Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network (CDN) with a single command.
+#### [Cloud Storage](docs/storage.md#cloud-storage)
+```ts
+import { } from '@angular/fire/storage';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-- [Deploy your application on Firebase Hosting](docs/deploy/getting-started.md)
+#### [Performance Monitoring](docs/performance.md#performance-monitoring)
+```ts
+import { } from '@angular/fire/performance';
+```
+</td>
+    <td>
 
-#### Server-side rendering
+#### [Realtime Database](docs/database.md#realtime-database)
+```ts
+import { } from '@angular/fire/database';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-> Angular Universal is a technology that allows you to run your Angular application on a server. This allows you to generate your HTML in a process called server-side rendering (SSR). AngularFire is compatible with server-side rendering; allowing you to take advantage of the Search Engine Optimization, link previews, the performance gains granted by the technology, and more. [Learn more about Angular Universal](https://angular.io/guide/universal).
+#### [Remote Config](docs/remote-config.md#remote-config)
+```ts
+import { } from '@angular/fire/remote-config';
+```
+</td>
+    <td>
 
-- [Getting started with Angular Universal](docs/universal/getting-started.md)
-- [Deploying your Universal application on Cloud Functions for Firebase](docs/universal/cloud-functions.md)
-- [Prerendering your Universal application](docs/universal/prerendering.md)
+#### [App Check](docs/app-check.md#app-check)
+```ts
+import { } from '@angular/fire/app-check';
+```
+</td>
+  </tr>
+</table>
 
-### Ionic
+### Deploying your site
 
-- [Installation and Setup with Ionic CLI](docs/ionic/cli.md)
-- [Using AngularFire with Ionic 2](docs/ionic/v2.md)
-- [Using AngularFire with Ionic 3](docs/ionic/v3.md)
+* Deploy to Firebase Hosting
+* Angular Universal: Deploy to Cloud Functions
+* Angular Universal: Deploy to Cloud Run
@@ -0,0 +1,67 @@
+<img align="right" width="30%" src="images/analytics-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Analytics
+</small>
+
+# Analytics
+
+Google Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.
+
+[Learn more](https://firebase.google.com/docs/analytics)
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Google Analytics instance in the application's `NgModule` (`app.module.ts`):
+
+```ts
+@NgModule({
+  declarations: [
+    ...
+  ],
+  imports: [
+    ...
+    // App initialization
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAnalytics(() => getAnalytics())
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Analytics } from '@angular/fire/analytics';
+
+@Component({
+    standalone: true,
+    selector: 'app-user-profile',
+    ...
+})
+export class UserProfileComponent {
+    private analytics: Analytics = inject(Analytics);
+    ...
+}
+```
+
+## Firebase API
+
+The [Firebase API for Google Analytics documentation](https://firebase.google.com/docs/reference/js/analytics.md#analytics_package) is available on the Firebase website.
+
+## Services
+
+### ScreenTrackingService
+
+Coming soon, for now [please review the documentation](https://firebase.google.com/docs/analytics/screenviews)
+
+### UserTrackingService
+Coming soon
+