yarn ng generate @angular/core:control-flow

src/app/features/activity/pages/activity/activity.component.html

@@ -1,9 +1,11 @@
 <app-page-title [title]="'Activity'"></app-page-title>
 
 <nav mat-tab-nav-bar>
-  <ng-container *ngFor="let category of categories">
+  @for (category of categories; track category) {
+
     <a mat-tab-link [active]="activeLink === category.key" [routerLink]="category.key">{{ category.label }}</a>
-  </ng-container>
+
+}
 </nav>
 
 <router-outlet></router-outlet>

src/app/features/blog/containers/articles/articles.component.html

@@ -2,8 +2,12 @@
 
 <p>はてなブログに投稿された最新の 30 件を表示</p>
 
-<div class="feed-wrapper" *ngIf="articles$ | async as articles">
-  <ng-container *ngFor="let article of articles">
+@if (articles$ | async; as articles) {
+<div class="feed-wrapper">
+  @for (article of articles; track article) {
+
     <app-article [feedItem]="article"></app-article>
-  </ng-container>
+
+}
 </div>
+}

src/app/features/blog/ui/article/article.component.html

@@ -2,8 +2,10 @@
   <p class="blog-item-date">{{ feedItem.publishDate | date : 'yyyy/MM/dd' }}</p>
   <a class="blog-item-link" href="{{ feedItem.link }}" target="_blank" rel="noopener">{{ feedItem.title }}</a>
   <ul class="category">
-    <ng-container *ngFor="let category of feedItem.categories">
+    @for (category of feedItem.categories; track category) {
+
       <li class="category-item">{{ category }}</li>
-    </ng-container>
+
+}
   </ul>
 </div>

src/app/features/lab/pages/lab/lab.component.html

@@ -1,10 +1,12 @@
 <app-page-title [title]="'Labs'"></app-page-title>
 
-<ng-container *ngFor="let content of labsContents">
+@for (content of labsContents; track content) {
+
   <app-card
     [title]="content.title"
     [demoPageUrl]="content.demoPageUrl"
     [repositoryName]="content.repositoryName"
     [repositoryUrl]="content.repositoryUrl"
   ></app-card>
-</ng-container>
+
+}

src/app/features/top/containers/top/top.component.html

@@ -4,9 +4,13 @@
   <img src="assets/images/profile.jpg" width="200" height="200" alt="" />
 
   <ul class="information">
-    <li class="list-item" *ngFor="let myInfo of myInfoList">{{ myInfo }}</li>
-    <li class="list-item" *ngFor="let sns of snsList">
+    @for (myInfo of myInfoList; track myInfo) {
+  <li class="list-item">{{ myInfo }}</li>
+}
+    @for (sns of snsList; track sns) {
+  <li class="list-item">
       <a appExternalLink href="{{ sns.url }}">{{ sns.serviceName }}</a>
     </li>
+}
   </ul>
 </div>

src/app/shared/card/card/card.component.html

@@ -1,7 +1,11 @@
 <div class="card">
   <div class="card-title">{{ title }}</div>
   <div class="external-links">
-    <a *ngIf="demoPageUrl" class="link" appExternalLink href="{{ demoPageUrl }}">demo</a>
-    <a *ngIf="repositoryUrl" class="link" appExternalLink href="{{ repositoryUrl }}">GitHub - {{ repositoryName }}</a>
+    @if (demoPageUrl) {
+<a class="link" appExternalLink href="{{ demoPageUrl }}">demo</a>
+}
+    @if (repositoryUrl) {
+<a class="link" appExternalLink href="{{ repositoryUrl }}">GitHub - {{ repositoryName }}</a>
+}
   </div>
 </div>