@angular/core migration - control-flow-migration

Converts the entire application to block control flow syntax

diff --git a/src/app/chatroom/chatroom.component.html b/src/app/chatroom/chatroom.component.html
index a0cc6fe14cb3a3f53c6e7c11bfbac071ba24199b..71c4cb276da5ce31c0e618076e4fb905fea7b484 100644 (file)
--- 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 9d21e46f8926a842494f6a4f7d35418133a4fbdc..b04ec509bf3bf234d11ffd89894a16f2c9263a85 100644 (file)
--- 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 b046c28c6816158641a81677a32672b31a09c3fe..bdc9b572f756b3fe34085d12788c2297a2f5eeda 100644 (file)
--- 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 9e2fc9c663e03e4b4d8b147bcdb8410ba20afd89..6473b31d2d08e22e8c01343fa1c6797419a3de7f 100644 (file)
--- 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 487f4835b3ebeaaab9139cbb3411cd8ce5e8ade2..bec378c0725e31e2a4f1b5d7f6051725e782d93f 100644 (file)
--- 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 3755b854433ee665834924a3aa1cbdc6fa35093c..0726e8730c0c093db4f9554255074d89c6d34a6a 100644 (file)
--- 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 {