docs(angular-query): fix nullish coalescing warnings in examples

Author: arnoud-dv

examples/angular/basic-persister/src/app/components/posts.component.html

@@ -1,35 +1,31 @@
 <div>
   <h1>Posts</h1>
-  @switch (postsQuery.status()) {
-    @case ('pending') {
-      Loading...
-    }
-    @case ('error') {
-      Error: {{ postsQuery.error()?.message }}
-    }
-    @default {
-      <div class="todo-container">
-        @for (post of postsQuery.data(); track post.id) {
-          <p>
-            <!--          We can access the query data here to show bold links for-->
-            <!--          ones that are cached-->
-            <a
-              href="#"
-              (click)="setPostId.emit(post.id)"
-              [style]="
-                queryClient.getQueryData(['post', post.id])
-                  ? {
-                      fontWeight: 'bold',
-                      color: 'green',
-                    }
-                  : {}
-              "
-              >{{ post.title }}</a
-            >
-          </p>
-        }
-      </div>
-    }
+  @if (postsQuery.isPending()) {
+    Loading...
+  } @else if (postsQuery.isError()) {
+    Error: {{ postsQuery.error().message }}
+  } @else if (postsQuery.isSuccess()) {
+    <div class="todo-container">
+      @for (post of postsQuery.data(); track post.id) {
+        <p>
+          <!--          We can access the query data here to show bold links for-->
+          <!--          ones that are cached-->
+          <a
+            href="#"
+            (click)="setPostId.emit(post.id)"
+            [style]="
+              queryClient.getQueryData(['post', post.id])
+                ? {
+                    fontWeight: 'bold',
+                    color: 'green',
+                  }
+                : {}
+            "
+          >{{ post.title }}</a
+          >
+        </p>
+      }
+    </div>
   }
   <div>
     @if (postsQuery.isFetching()) {

examples/angular/devtools-panel/src/app/components/example-query.component.ts

@@ -22,7 +22,8 @@ interface Response {
       @if (query.isError()) {
         <div>An error has occurred: {{ query.error().message }}</div>
       }
-      @if (query.data(); as data) {
+      @if (query.isSuccess()) {
+        @let data = query.data();
         <h1>{{ data.name }}</h1>
         <p>{{ data.description }}</p>
         <strong>👀 {{ data.subscribers_count }}</strong>

examples/angular/infinite-query-with-max-pages/src/app/components/example.component.html

@@ -5,7 +5,7 @@ <h3>3 pages max</h3>
   @if (query.isPending()) {
     <p>Loading...</p>
   } @else if (query.isError()) {
-    <span>Error: {{ query.error()?.message }}</span>
+    <span>Error: {{ query.error().message }}</span>
   } @else {
     <div>
       <button
@@ -15,7 +15,7 @@ <h3>3 pages max</h3>
         {{ previousButtonText() }}
       </button>
     </div>
-    @for (page of query.data()?.pages; track $index) {
+    @for (page of query.data().pages; track $index) {
       @for (project of page.data; track project.id) {
         <p [projectStyle]="project.id">{{ project.name }} {{ project.id }}</p>
       }

examples/angular/query-options-from-a-service/src/app/components/post.component.html

@@ -7,7 +7,8 @@
   } @else if (postQuery.isError()) {
     Error: {{ postQuery.error().message }}
   }
-  @if (postQuery.data(); as post) {
+  @if (postQuery.isSuccess()) {
+    @let post = postQuery.data();
     <h1>{{ post.title }}</h1>
     <div>
       <p>{{ post.body }}</p>

examples/angular/query-options-from-a-service/src/app/components/posts.component.html

@@ -1,34 +1,30 @@
 <div>
   <h1>Posts</h1>
-  @switch (postsQuery.status()) {
-    @case ('pending') {
-      Loading...
-    }
-    @case ('error') {
-      Error: {{ postsQuery.error()?.message }}
-    }
-    @default {
-      <div class="todo-container">
-        @for (post of postsQuery.data(); track post.id) {
-          <p>
-            <!--          We can access the query data here to show bold links for-->
-            <!--          ones that are cached-->
-            <a
-              routerLink="post/{{ post.id }}"
-              [style]="
+  @if (postsQuery.isPending()) {
+    Loading...
+  } @else if (postsQuery.isError()) {
+    Error: {{ postsQuery.error().message }}
+  } @else if (postsQuery.isSuccess()) {
+    <div class="todo-container">
+      @for (post of postsQuery.data(); track post.id) {
+        <p>
+          <!--          We can access the query data here to show bold links for-->
+          <!--          ones that are cached-->
+          <a
+            routerLink="post/{{ post.id }}"
+            [style]="
                 queryClient.getQueryData(['post', post.id])
                   ? {
                       fontWeight: 'bold',
                       color: 'green',
                     }
                   : {}
               "
-              >{{ post.title }}</a
-            >
-          </p>
-        }
-      </div>
-    }
+          >{{ post.title }}</a
+          >
+        </p>
+      }
+    </div>
   }
   <div>
     @if (postsQuery.isFetching()) {

examples/angular/router/src/app/components/post.component.html

@@ -7,7 +7,8 @@
   } @else if (postQuery.isError()) {
     Error: {{ postQuery.error().message }}
   }
-  @if (postQuery.data(); as post) {
+  @if (postQuery.isSuccess()) {
+    @let post = postQuery.data();
     <h1>{{ post.title }}</h1>
     <div>
       <p>{{ post.body }}</p>