From 04974a534ace9861e4135dbf23c5f8ede015933c Mon Sep 17 00:00:00 2001
From: Jan Olaf Martin <jankrems@google.com>
Date: Wed, 15 Oct 2025 11:06:34 -0700
Subject: [PATCH] Use modern control flow syntax in Angular example

This aligns more with the Stackblitz code later on the page and with the usage on the guides pages.

Of note: The `data()` check was moved into an `@else` because accessing `data()` will throw and no longer return `undefined` when no data is available in the latest resource pattern.
---
 .../_libraries/query.$version.index.tsx       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/routes/_libraries/query.$version.index.tsx b/src/routes/_libraries/query.$version.index.tsx
index 99d031a9..fa931ccf 100644
--- a/src/routes/_libraries/query.$version.index.tsx
+++ b/src/routes/_libraries/query.$version.index.tsx
@@ -163,16 +163,20 @@ import { injectQuery } from '@tanstack/angular-query-experimental'
 
 @Component({
   selector: 'todos',
-  standalone: true,
   template: \`
-    <ng-container *ngIf="todos.isPending()">
+    @if (todos.isPending()) {
       Loading...
-    </ng-container>
-    <ul *ngIf="todos.data() as data">
-      <li *ngFor="let t of data">
-        {{ t.title }}
-      </li>
-    </ul>
+    } @else if (todos.isError()) {
+      Oops!
+    } @else {
+      <ul>
+        @for (t of todos.data(); track t.id) {
+          <li>
+            {{ t.title }}
+          </li>
+        }
+      </ul>
+    }
   \`,
 })
 export class TodosComponent {