From 9797f6b9b102e34677214a0c32b258975e0101ef Mon Sep 17 00:00:00 2001
From: "Wataru.Kasahara" <kasahara1019@gmail.com>
Date: Wed, 15 Nov 2023 19:26:53 +0900
Subject: [PATCH] yarn ng generate @angular/core:control-flow

---
 .../activity/pages/activity/activity.component.html    |  6 ++++--
 .../blog/containers/articles/articles.component.html   | 10 +++++++---
 .../features/blog/ui/article/article.component.html    |  6 ++++--
 src/app/features/lab/pages/lab/lab.component.html      |  6 ++++--
 src/app/features/top/containers/top/top.component.html |  8 ++++++--
 src/app/shared/card/card/card.component.html           |  8 ++++++--
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/app/features/activity/pages/activity/activity.component.html b/src/app/features/activity/pages/activity/activity.component.html
index fea02270..9d1f3abc 100644
--- a/src/app/features/activity/pages/activity/activity.component.html
+++ b/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>
diff --git a/src/app/features/blog/containers/articles/articles.component.html b/src/app/features/blog/containers/articles/articles.component.html
index 145b72e6..f549cf01 100644
--- a/src/app/features/blog/containers/articles/articles.component.html
+++ b/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>
+}
diff --git a/src/app/features/blog/ui/article/article.component.html b/src/app/features/blog/ui/article/article.component.html
index 5585a7ae..1984a33a 100644
--- a/src/app/features/blog/ui/article/article.component.html
+++ b/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>
diff --git a/src/app/features/lab/pages/lab/lab.component.html b/src/app/features/lab/pages/lab/lab.component.html
index c4035e8c..c6048a09 100644
--- a/src/app/features/lab/pages/lab/lab.component.html
+++ b/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>
+
+}
diff --git a/src/app/features/top/containers/top/top.component.html b/src/app/features/top/containers/top/top.component.html
index 1d7d48f6..8e80fe7f 100644
--- a/src/app/features/top/containers/top/top.component.html
+++ b/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>
diff --git a/src/app/shared/card/card/card.component.html b/src/app/shared/card/card/card.component.html
index 6ac85396..24f6532e 100644
--- a/src/app/shared/card/card/card.component.html
+++ b/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>