@@ -42,12 +42,14 @@ Open `/src/app/app.component.ts`, and make the following changes to :
4242
4343``` ts
4444import {Component ,inject }from ' @angular/core'
45+ import {AsyncPipe }from ' @angular/common'
4546import {Firestore }from ' @angular/fire/firestore'
4647
4748@Component ({
4849 selector:' app-root'
4950 templateUrl:' app.component.html'
50- styleUrls: [' app.component.css'
51+ styleUrls: [' app.component.css'
52+ imports: [AsyncPipe ],
5153})
5254export class AppComponent {
5355 firestore: Firestore = inject (Firestore );
@@ -64,11 +66,14 @@ In `/src/app/app.component.ts`:
6466
6567``` ts
6668import {Component ,inject }from ' @angular/core'
67- import {Firestore , collection , collectionData from ' @angular/fire/firestore '
69+ import {AsyncPipe from ' @angular/common '
6870import {Observable }from ' rxjs'
71+ import {Firestore ,collection ,collectionData }from ' @angular/fire/firestore'
6972
7073@Component ({
7174 selector:' app-root'
75+ standalone:true ,
76+ imports: [AsyncPipe ],
7277 templateUrl:' app.component.html'
7378 styleUrls: [' app.component.css'
7479})
@@ -87,9 +92,9 @@ Open `/src/app/app.component.html`:
8792
8893``` html
8994<ul >
90- < li class = " text " *ngFor = " let item of items$ | async" >
91- {{ item.name}}
92- </ li >
95+ @for ( item of items$ | async; track item) {
96+ < li >{{ item.name }}</ li >
97+ }
9398</ul >
9499```
95100