From f8893cbf5b5a9bd10d93e3fe4eb62620ae0587d2 Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Wed, 17 Sep 2025 20:34:28 +0000
Subject: [PATCH] @angular/core migration - control-flow-migration

Converts the entire application to block control flow syntax
---
 src/app/chatroom/chatroom.component.html   | 10 ++++++----
 src/app/chatroom/chatroom.component.ts     |  4 ++--
 src/app/chatrooms/chatrooms.component.html |  4 +++-
 src/app/chatrooms/chatrooms.component.ts   |  4 ++--
 src/app/user/user.component.html           | 14 ++++++++++----
 src/app/user/user.component.ts             |  4 ++--
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/app/chatroom/chatroom.component.html b/src/app/chatroom/chatroom.component.html
index a0cc6fe1..71c4cb27 100644
--- a/src/app/chatroom/chatroom.component.html
+++ b/src/app/chatroom/chatroom.component.html
@@ -4,10 +4,12 @@
   </div>
   <div class="card-body">
     <ul class="list-unstyled">
-      <li class="input-group mb-1" *ngFor="let message of messages">
-        <span class="input-group-text">{{message.user}}</span>
-        <span class="form-control">{{message.text}}</span>
-      </li>
+      @for (message of messages; track message) {
+        <li class="input-group mb-1">
+          <span class="input-group-text">{{message.user}}</span>
+          <span class="form-control">{{message.text}}</span>
+        </li>
+      }
     </ul>
   </div>
 </div>
diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts
index 9d21e46f..b04ec509 100644
--- a/src/app/chatroom/chatroom.component.ts
+++ b/src/app/chatroom/chatroom.component.ts
@@ -4,13 +4,13 @@ import { ChatroomService } from './chatroom.service';
 import { UserService } from '../user/user.service';
 import { Chatroom } from './chatroom';
 import { Message } from './message';
-import { NgFor } from '@angular/common';
+
 
 @Component({
   selector: 'app-chatroom',
   templateUrl: './chatroom.component.html',
   styleUrls: ['./chatroom.component.less'],
-  imports: [NgFor],
+  imports: [],
 })
 export class ChatroomComponent implements OnInit, OnDestroy {
 
diff --git a/src/app/chatrooms/chatrooms.component.html b/src/app/chatrooms/chatrooms.component.html
index b046c28c..bdc9b572 100644
--- a/src/app/chatrooms/chatrooms.component.html
+++ b/src/app/chatrooms/chatrooms.component.html
@@ -3,6 +3,8 @@
     <h1 class="h5">Please Choose a Chat-Room</h1>
   </div>
   <div class="card-body d-grid gap-1">
-    <button *ngFor="let chatroom of chatrooms" routerLink="/chatroom/{{chatroom.shard ? chatroom.shard : '_'}}/{{chatroom.id}}" type="button" class="btn btn-outline-primary">{{chatroom.name}}</button>
+    @for (chatroom of chatrooms; track chatroom) {
+      <button routerLink="/chatroom/{{chatroom.shard ? chatroom.shard : '_'}}/{{chatroom.id}}" type="button" class="btn btn-outline-primary">{{chatroom.name}}</button>
+    }
   </div>
 </div>
diff --git a/src/app/chatrooms/chatrooms.component.ts b/src/app/chatrooms/chatrooms.component.ts
index 9e2fc9c6..6473b31d 100644
--- a/src/app/chatrooms/chatrooms.component.ts
+++ b/src/app/chatrooms/chatrooms.component.ts
@@ -3,13 +3,13 @@ import { Chatroom } from '../chatroom/chatroom';
 import { UserService } from "../user/user.service";
 import { ChatroomService } from "../chatroom/chatroom.service";
 import { RouterLink } from '@angular/router';
-import { NgFor } from '@angular/common';
+
 
 @Component({
   selector: 'app-chatrooms',
   templateUrl: './chatrooms.component.html',
   styleUrls: ['./chatrooms.component.less'],
-  imports: [NgFor, RouterLink],
+  imports: [RouterLink],
 })
 export class ChatroomsComponent implements OnInit
 {
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 487f4835..bec378c0 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -8,10 +8,16 @@
         <button type="submit" class="btn btn-primary" (click)="updateName()" [disabled]="usernameForm.invalid">Pick</button>
       </div>
     </div>
-    <div *ngIf="usernameForm.invalid && (usernameForm.dirty || usernameForm.touched)">
-      <div *ngIf="usernameForm.errors?.['required']">Name is required.</div>
-      <div *ngIf="usernameForm.hasError('whitespace')">The username must not be empty</div>
-    </div>
+    @if (usernameForm.invalid && (usernameForm.dirty || usernameForm.touched)) {
+      <div>
+        @if (usernameForm.errors?.['required']) {
+          <div>Name is required.</div>
+        }
+        @if (usernameForm.hasError('whitespace')) {
+          <div>The username must not be empty</div>
+        }
+      </div>
+    }
   </div>
   <div class="card-footer">
     <span class="float-start">Value: {{ usernameForm.value }}</span>
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 3755b854..0726e873 100644
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -7,13 +7,13 @@ import {
 } from '@angular/forms';
 import { Router } from "@angular/router";
 import { UserService } from "./user.service";
-import { NgIf } from '@angular/common';
+
 
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.less'],
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule],
 })
 export class UserComponent {
 
-- 
2.39.5