feat: migrate to new control flow

Author: brandonroberts

src/app/components/posts.component.ts

@@ -11,17 +11,19 @@ import { Post } from '../data/posts';
   imports: [NgFor, RouterLink, DatePipe],
   template: `
     <div class="text-2xl">
-      <div class="py-4" *ngFor="let post of posts">
-        <a
-          [routerLink]="['/blog', 'posts', post.attributes.slug]"
-          class="text-gray-600"
-          >{{ post.attributes.title }}</a
-        >
+      @for (post of posts; track post.slug) {
+        <div class="py-4">
+          <a
+            [routerLink]="['/blog', 'posts', post.attributes.slug]"
+            class="text-gray-600"
+            >{{ post.attributes.title }}</a
+          >
 
-        <p class="text-sm">
-          {{ post.attributes.publishedDate | date : 'MMMM dd, yyyy' }}
-        </p>
-      </div>
+          <p class="text-sm">
+            {{ post.attributes.publishedDate | date : 'MMMM dd, yyyy' }}
+          </p>
+        </div>
+      }
     </div>
   `,
 })

src/app/pages/blog/posts.[slug].page.ts

@@ -10,18 +10,20 @@ import { Post } from '../../data/posts';
   standalone: true,
   imports: [MarkdownComponent, AsyncPipe, NgIf, DatePipe, ReadingTimePipe],
   template: `
-    <div class="flex flex-grow justify-center min-h-screen" *ngIf="post$ | async as post">
-      <article class="w-screen max-w-4xl p-8">
-        <h2 class="text-gray-600 text-2xl">{{ post.attributes.title }}</h2>
+    @if (post$ | async; as post) {
+      <div class="flex flex-grow justify-center min-h-screen">
+        <article class="w-screen max-w-4xl p-8">
+          <h2 class="text-gray-600 text-2xl">{{ post.attributes.title }}</h2>
 
-        <span class="font-light text-sm">
-          {{ post.attributes.publishedDate | date : 'MMMM dd, yyyy' }} -
-          {{ post.content | readingtime }} min read
-        </span>
+          <span class="font-light text-sm">
+            {{ post.attributes.publishedDate | date : 'MMMM dd, yyyy' }} -
+            {{ post.content | readingtime }} min read
+          </span>
 
-        <analog-markdown [content]="post.content"></analog-markdown>
-      </article>
-    </div>
+          <analog-markdown [content]="post.content"></analog-markdown>
+        </article>
+      </div>
+    }
   `,
 })
 export default class BlogPostComponent {