migrate angular 21

src/app/modules/user/info/info.component.html

@@ -1,34 +1,36 @@
-<app-card *ngIf="user$ | async as user" heading="Hallo {{ user.name }}">
-  <p>
-    <span *ngIf="getUserRoles(user.role).length === 0" class="warn"
-    >Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
-      Administrator!</span
-    >
-    <span>{{ transdormUserRoles(user.role) }}</span>
-  </p>
+@if (user$ | async; as user) {
+  <app-card heading="Hallo {{ user.name }}">
+    <p>
+      @if (getUserRoles(user.role).length === 0) {
+        <span class="warn"
+          >Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
+          Administrator!</span
+          >
+        }
+        <span>{{ transdormUserRoles(user.role) }}</span>
+      </p>
+      <mat-form-field appearance="outline">
+        <mat-label>bevorzugte Anzeige der Akkorde</mat-label>
+        <mat-select
+          (ngModelChange)="onChordModeChanged(user.id, $event)"
+          [ngModel]="user.chordMode"
+          >
+          <mat-option [value]="null"></mat-option>
+          <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
+          <mat-option value="onlyFirst"
+            >in Strophen die Akkorde nur für die erste anzeigen
+          </mat-option>
+          <mat-option value="show">alle anzeigen</mat-option>
+        </mat-select>
+        <mat-hint
+          >Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert
+          werden.
+        </mat-hint>
+      </mat-form-field>
+      <app-button-row>
+        <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
+      </app-button-row>
+    </app-card>
+  }
 
-  <mat-form-field appearance="outline">
-    <mat-label>bevorzugte Anzeige der Akkorde</mat-label>
-    <mat-select
-      (ngModelChange)="onChordModeChanged(user.id, $event)"
-      [ngModel]="user.chordMode"
-    >
-      <mat-option [value]="null"></mat-option>
-      <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
-      <mat-option value="onlyFirst"
-      >in Strophen die Akkorde nur für die erste anzeigen
-      </mat-option>
-      <mat-option value="show">alle anzeigen</mat-option>
-    </mat-select>
-    <mat-hint
-    >Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert
-      werden.
-    </mat-hint>
-  </mat-form-field>
-
-  <app-button-row>
-    <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
-  </app-button-row>
-</app-card>
-
-<app-users *appRole="['admin']"></app-users>
+  <app-users *appRole="['admin']"></app-users>

src/app/modules/user/info/info.component.ts

@@ -6,7 +6,7 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatFormField, MatHint, MatLabel} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
@@ -23,7 +23,6 @@ import {UsersComponent} from './users/users.component';
   templateUrl: './info.component.html',
   styleUrls: ['./info.component.less'],
   imports: [
-    NgIf,
     CardComponent,
     MatFormField,
     MatLabel,

src/app/modules/user/info/users/user/user.component.html

@@ -1,31 +1,37 @@
-<div *ngIf="edit" class="users">
-  <mat-form-field appearance="outline">
-    <mat-label>Name</mat-label>
-    <input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput />
-  </mat-form-field>
+@if (edit) {
+  <div class="users">
+    <mat-form-field appearance="outline">
+      <mat-label>Name</mat-label>
+      <input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput />
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <mat-label>Rolle</mat-label>
+      <mat-select
+        (ngModelChange)="onRoleChanged(id, $event)"
+        [ngModel]="roles"
+        multiple
+        >
+        @for (role of ROLE_TYPES; track role) {
+          <mat-option [value]="role">{{
+            role | role
+            }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <button (click)="edit = false" mat-icon-button>
+      <fa-icon [icon]="faClose"></fa-icon>
+    </button>
+  </div>
+}
 
-  <mat-form-field appearance="outline">
-    <mat-label>Rolle</mat-label>
-    <mat-select
-      (ngModelChange)="onRoleChanged(id, $event)"
-      [ngModel]="roles"
-      multiple
-    >
-      <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{
-          role | role
-        }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-
-  <button (click)="edit = false" mat-icon-button>
-    <fa-icon [icon]="faClose"></fa-icon>
-  </button>
-</div>
-
-<div (click)="edit = true" *ngIf="!edit" class="users list-item">
-  <span>{{ name }}</span>
-  <span
-  ><span *ngFor="let role of roles">{{ role | role }}, </span></span
-  >
-</div>
+@if (!edit) {
+  <div (click)="edit = true" class="users list-item">
+    <span>{{ name }}</span>
+    <span
+      >@for (role of roles; track role) {
+      <span>{{ role | role }}, </span>
+      }</span
+      >
+    </div>
+  }

src/app/modules/user/info/users/user/user.component.ts

@@ -3,7 +3,7 @@ import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
-import {NgFor, NgIf} from '@angular/common';
+
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -17,7 +17,7 @@ import {RolePipe} from '../../role.pipe';
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.less'],
-  imports: [NgIf, MatFormField, MatLabel, MatInput, ReactiveFormsModule, FormsModule, MatSelect, NgFor, MatOption, MatIconButton, FaIconComponent, RolePipe],
+  imports: [MatFormField, MatLabel, MatInput, ReactiveFormsModule, FormsModule, MatSelect, MatOption, MatIconButton, FaIconComponent, RolePipe],
 })
 export class UserComponent {
   public id = '';

src/app/modules/user/info/users/users.component.html

@@ -1,3 +1,5 @@
 <app-card heading="registrierte Benutzer">
-  <app-user *ngFor="let user of users$ | async | sortBy: 'asc':'name'" [user]="user"></app-user>
+  @for (user of users$ | async | sortBy: 'asc':'name'; track user) {
+    <app-user [user]="user"></app-user>
+  }
 </app-card>

src/app/modules/user/info/users/users.component.ts

@@ -3,7 +3,7 @@ import {UserService} from '../../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../../services/user/user';
 import {CardComponent} from '../../../../widget-modules/components/card/card.component';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {UserComponent} from './user/user.component';
 import {SortByPipe} from '../../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
@@ -11,7 +11,7 @@ import {SortByPipe} from '../../../../widget-modules/pipes/sort-by/sort-by.pipe'
   selector: 'app-users',
   templateUrl: './users.component.html',
   styleUrls: ['./users.component.less'],
-  imports: [CardComponent, NgFor, UserComponent, AsyncPipe, SortByPipe],
+  imports: [CardComponent, UserComponent, AsyncPipe, SortByPipe],
 })
 export class UsersComponent {
   public users$: Observable<User[]>;

src/app/modules/user/login/login.component.html

@@ -14,22 +14,24 @@
           formControlName="pass"
           matInput
           type="password"
-        />
+          />
       </mat-form-field>
-      <p *ngIf="errorMessage" class="error">{{ errorMessage | authMessage }}</p>
+      @if (errorMessage) {
+        <p class="error">{{ errorMessage | authMessage }}</p>
+      }
       <button
         (click)="onLogin()"
         class="btn-login"
         color="primary"
         mat-stroked-button
-      >
+        >
         Anmelden
       </button>
       <button
         class="btn-password"
         mat-stroked-button
         routerLink="/user/password"
-      >
+        >
         Passwort zurücksetzen
       </button>
       <button class="btn-user" mat-stroked-button routerLink="/user/new">

src/app/modules/user/login/login.component.ts

@@ -6,7 +6,7 @@ import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
 import {LogoComponent} from '../../../widget-modules/components/logo/logo.component';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
-import {NgIf} from '@angular/common';
+
 import {MatButton} from '@angular/material/button';
 import {AuthMessagePipe} from './auth-message.pipe';
 
@@ -14,7 +14,7 @@ import {AuthMessagePipe} from './auth-message.pipe';
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.less'],
-  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, NgIf, MatButton, RouterLink, AuthMessagePipe],
+  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatButton, RouterLink, AuthMessagePipe],
 })
 export class LoginComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({

src/app/modules/user/password/password.component.html

@@ -6,14 +6,16 @@
         (keyup.enter)="onResetPassword()"
         formControlName="user"
         matInput
-      />
+        />
     </mat-form-field>
 
     <app-button-row>
       <app-button (click)="onResetPassword()" [icon]="faNewPassword"
-      >neues Passwort anfordern
+        >neues Passwort anfordern
       </app-button>
-      <p *ngIf="errorMessage" class="error">{{ errorMessage | authMessage }}</p>
+      @if (errorMessage) {
+        <p class="error">{{ errorMessage | authMessage }}</p>
+      }
     </app-button-row>
   </div>
 </app-card>

src/app/modules/user/password/password.component.ts

@@ -8,14 +8,14 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
-import {NgIf} from '@angular/common';
+
 import {AuthMessagePipe} from '../login/auth-message.pipe';
 
 @Component({
   selector: 'app-password',
   templateUrl: './password.component.html',
   styleUrls: ['./password.component.less'],
-  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, NgIf, AuthMessagePipe],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, AuthMessagePipe],
 })
 export class PasswordComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({