diff --git a/apps/performance/36-ngfor-optimization/src/app/person-list.component.ts b/apps/performance/36-ngfor-optimization/src/app/person-list.component.ts
index 6d9b2b4af..887fd73f6 100644
--- a/apps/performance/36-ngfor-optimization/src/app/person-list.component.ts
+++ b/apps/performance/36-ngfor-optimization/src/app/person-list.component.ts
@@ -7,23 +7,23 @@ import { Person } from './person.model';
   selector: 'app-person-list',
   imports: [CommonModule],
   template: `
-    <div
-      *ngFor="let person of persons"
-      class="flex items-center justify-between border-b">
-      <h3>{{ person.name }}</h3>
-      <div class="flex gap-10 py-1">
-        <button
-          class="rounded-md border bg-blue-500 p-2 text-white"
-          (click)="update.emit(person.email)">
-          UPDATE
-        </button>
-        <button
-          class="rounded-md border bg-red-500 p-2 text-white"
-          (click)="delete.emit(person.email)">
-          DELETE
-        </button>
+    @for (person of persons; track person.email) {
+      <div class="flex items-center justify-between border-b">
+        <h3>{{ person.name }}</h3>
+        <div class="flex gap-10 py-1">
+          <button
+            class="rounded-md border bg-blue-500 p-2 text-white"
+            (click)="update.emit(person.email)">
+            UPDATE
+          </button>
+          <button
+            class="rounded-md border bg-red-500 p-2 text-white"
+            (click)="delete.emit(person.email)">
+            DELETE
+          </button>
+        </div>
       </div>
-    </div>
+    }
   `,
   host: {
     class: 'w-full flex flex-col',