docs: simplify BlogComponent by removing NgFor & NgIf (#1953)

Author: dmorfav

apps/docs-app/docs/features/routing/content.md

@@ -254,7 +254,6 @@ To get a list using the list of content files in the `src/content` folder, use t
 import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { injectContentFiles } from '@analogjs/content';
-import { NgFor } from '@angular/common';
 
 export interface PostAttributes {
   title: string;
@@ -265,14 +264,18 @@ export interface PostAttributes {
 
 @Component({
   standalone: true,
-  imports: [RouterOutlet, RouterLink, NgFor],
+  imports: [RouterOutlet, RouterLink],
   template: `
     <ul>
-      <li *ngFor="let post of posts">
-        <a [routerLink]="['/blog', 'posts', post.slug]">{{
-          post.attributes.title
-        }}</a>
-      </li>
+      @for (post of posts; track post.slug) {
+        <li>
+          <a [routerLink]="['/blog', 'posts', post.slug]">
+            {{ post.attributes.title }}
+          </a>
+        </li>
+      } @empty {
+        <li>No posts yet.</li>
+      }
     </ul>
   `,
 })
@@ -292,7 +295,7 @@ The `injectContent()` function uses the `slug` route parameter by default to get
 ```ts
 // /src/app/pages/blog/posts.[slug].page.ts
 import { injectContent, MarkdownComponent } from '@analogjs/content';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 
 export interface PostAttributes {
@@ -304,12 +307,12 @@ export interface PostAttributes {
 
 @Component({
   standalone: true,
-  imports: [MarkdownComponent, AsyncPipe, NgIf],
+  imports: [MarkdownComponent, AsyncPipe],
   template: `
-    <ng-container *ngIf="post$ | async as post">
+    @if (post$ | async; as post) {
       <h1>{{ post.attributes.title }}</h1>
       <analog-markdown [content]="post.content"></analog-markdown>
-    </ng-container>
+    }
   `,
 })
 export default class BlogPostComponent {
@@ -429,12 +432,12 @@ export interface ProjectAttributes {
 
 @Component({
   standalone: true,
-  imports: [MarkdownComponent, AsyncPipe, NgIf],
+  imports: [MarkdownComponent, AsyncPipe],
   template: `
-    <ng-container *ngIf="project$ | async as project">
+    @if (project$ | async; as project) {
       <h1>{{ project.attributes.title }}</h1>
       <analog-markdown [content]="project.content"></analog-markdown>
-    </ng-container>
+    }
   `,
 })
 export default class ProjectComponent {