From 4ea92c30e7f61c272ac9c2b438476b3360f2b1cb Mon Sep 17 00:00:00 2001
From: DellaBitta <drsanta@google.com>
Date: Wed, 23 Oct 2024 14:56:17 -0400
Subject: [PATCH] Update Firestore example to use @for and AsyncPipe

---
 docs/install-and-setup.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/install-and-setup.md b/docs/install-and-setup.md
index fa78e7fc5..59f4b53d6 100644
--- a/docs/install-and-setup.md
+++ b/docs/install-and-setup.md
@@ -42,12 +42,14 @@ Open `/src/app/app.component.ts`, and make the following changes to :
 
 ```ts
 import { Component, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
 import { Firestore } from '@angular/fire/firestore';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  imports: [AsyncPipe],
 })
 export class AppComponent {
   firestore: Firestore = inject(Firestore);
@@ -64,11 +66,14 @@ In `/src/app/app.component.ts`:
 
 ```ts
 import { Component, inject } from '@angular/core';
-import { Firestore, collection, collectionData } from '@angular/fire/firestore';
+import { AsyncPipe } from '@angular/common';
 import { Observable } from 'rxjs';
+import { Firestore, collection, collectionData } from '@angular/fire/firestore';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [AsyncPipe],
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
 })
@@ -87,9 +92,9 @@ Open `/src/app/app.component.html`:
 
 ```html
 <ul>
-  <li class="text" *ngFor="let item of items$ | async">
-    {{item.name}}
-  </li>
+  @for (item of items$ | async; track item) {
+    <li>{{ item.name }}</li>
+  }
 </ul>
 ```