refactor: Apply new Angular control flow

This commit applies the new Angular control flow introduced with
Angular 17 to several components. This includes some simplifications
that can now be applied more easily. In addition, some css classes
have been converted to tailwind and unused css files have been removed.
Last but not least, some line breaks and indentations in the components
have been adjusted to improve readability.

frontend/src/app/general/auth/auth/auth.component.html

@@ -10,19 +10,26 @@ <h1>Capella Collaboration Manager</h1>
     This service enables co-working on Capella MBSE projects. <br />
     To continue to the service you need an invite from an existing user. <br />
   </div>
-  <div *ngIf="params.has('error')" id="oauth-error" class="collab-card">
-    <p>
-      The OAuth2 server raised the following error:<br />
-      <b>{{ params.get("error") }}</b>
-    </p>
-    <p *ngIf="params.has('error_description')">
-      {{ params.get("error_description") }}
-    </p>
-    <p *ngIf="params.has('error_uri')">
-      More informations:
-      <a href="{{ params.get('error_uri') }}">{{ params.get("error_uri") }}</a>
-    </p>
-  </div>
+
+  @if (params.has("error"); as error) {
+    <div id="oauth-error" class="collab-card">
+      <p>
+        The OAuth2 server raised the following error:<br />
+        <b>{{ error }}</b>
+      </p>
+
+      @if (params.has("error_description"); as error_description) {
+        <p>{{ error_description }}</p>
+      }
+
+      @if (params.has("error_uri"); as error_uri) {
+        <p>
+          More informations:
+          <a href="{{ error_uri }}">{{ error_uri }}</a>
+        </p>
+      }
+    </div>
+  }
   <div id="oauth-login">
     <button mat-flat-button color="primary" (click)="webSSO()">
       Login with

frontend/src/app/general/auth/logout/logout/logout.component.html

@@ -4,10 +4,16 @@
  -->
 
 <div class="message">
-  <div *ngIf="reason === 'logout'">The Logout was successful.</div>
-  <div *ngIf="reason === 'session-expired'">Your session has expired.</div>
-  <div *ngIf="reason === 'unauthorized'">
-    An unknown error occurred during the authorization.
-  </div>
+  @switch (reason) {
+    @case ("logout") {
+      The Logout was successful.
+    }
+    @case ("session-expired") {
+      Your session has expired.
+    }
+    @case ("unauthorized") {
+      An unknown error occurred during the authorization.
+    }
+  }
   <app-auth [autoLogin]="autoLogin"></app-auth>
 </div>

frontend/src/app/general/header/header.component.html

@@ -34,9 +34,9 @@
               class=""
             >
               {{ item.name }}
-              <mat-icon iconPositionEnd *ngIf="item.icon">{{
-                item.icon
-              }}</mat-icon>
+              @if (item.icon) {
+                <mat-icon iconPositionEnd>{{ item.icon }}</mat-icon>
+              }
             </a>
           } @else {
             <a
@@ -68,35 +68,27 @@
         >
           Profile <mat-icon>account_circle</mat-icon>
         </a>
-        <a
-          *ngIf="userService.user?.role === 'administrator'"
-          class="px-[15px] text-left"
-          mat-menu-item
-          routerLink="settings"
-        >
-          Settings <mat-icon>settings</mat-icon>
-        </a>
-        <a
-          *ngIf="userService.user?.role === 'administrator'"
-          class="px-[15px] text-left"
-          mat-menu-item
-          routerLink="events"
-        >
-          Events <mat-icon>event_note</mat-icon>
-        </a>
-
+        @if (userService.user?.role === "administrator") {
+          <a class="px-[15px] text-left" mat-menu-item routerLink="settings">
+            Settings <mat-icon>settings</mat-icon>
+          </a>
+          <a class="px-[15px] text-left" mat-menu-item routerLink="events">
+            Events <mat-icon>event_note</mat-icon>
+          </a>
+        }
         <a class="px-[15px] text-left" mat-menu-item routerLink="tokens">
           Tokens <mat-icon>key</mat-icon>
         </a>
-        <a
-          class="px-[15px] text-left"
-          mat-menu-item
-          routerLink="logout/redirect"
-          [queryParams]="{ reason: 'logout' }"
-          *ngIf="authService.isLoggedIn()"
-        >
-          Log out <mat-icon>logout</mat-icon>
-        </a>
+        @if (authService.isLoggedIn()) {
+          <a
+            class="px-[15px] text-left"
+            mat-menu-item
+            routerLink="logout/redirect"
+            [queryParams]="{ reason: 'logout' }"
+          >
+            Log out <mat-icon>logout</mat-icon>
+          </a>
+        }
       </mat-menu>
 
       <button

frontend/src/app/general/metadata/version/version.component.html

@@ -3,23 +3,26 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper">
+<div class="m-2.5 cursor-pointer text-gray-500">
   <a
     href="/docs/release-notes/"
     target="_blank"
     (click)="metadataService.clickedOnVersionNotes()"
+    class="text-inherit"
   >
-    <div
-      class="text-error"
-      *ngIf="metadataService.changedVersion && metadataService.version"
-    >
-      New version. What's new? (<span *ngIf="metadataService.oldVersion"
-        >{{ metadataService.oldVersion }}
-        <mat-icon class="mat-icon-position top left"
-          >arrow_right_alt</mat-icon
-        ></span
-      >{{ metadataService.version.git.tag }})
-    </div>
+    @if (metadataService.changedVersion && metadataService.version) {
+      <div class="text-error">
+        New version. What's new? (
+        <span *ngIf="metadataService.oldVersion">
+          {{ metadataService.oldVersion }}
+          <mat-icon class="mat-icon-position top left"
+            >arrow_right_alt</mat-icon
+          >
+        </span>
+        {{ metadataService.version.git.tag }})
+      </div>
+    }
+
     Environment:
     {{ (metadataService.backendMetadata | async)?.environment || "-" }} <br />
     Frontend version: {{ metadataService.version?.git?.version }} <br />

frontend/src/app/general/metadata/version/version.component.ts

@@ -10,7 +10,6 @@ import { MetadataService } from '../metadata.service';
 @Component({
   selector: 'app-version',
   templateUrl: './version.component.html',
-  styleUrls: ['./version.component.css'],
 })
 export class VersionComponent {
   constructor(

frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.html

@@ -4,9 +4,9 @@
  -->
 
 <mat-list>
-  <div *ngFor="let item of navBarService.navBarItems">
-    <ng-container *ngIf="userService.validateUserRole(item.requiredRole)">
-      <ng-container *ngIf="item.href; else router">
+  @for (item of navBarService.navBarItems; track item.name) {
+    @if (userService.validateUserRole(item.requiredRole)) {
+      @if (item.href) {
         <a
           class="items-center"
           mat-list-item
@@ -15,29 +15,35 @@
           [attr.target]="item.target"
         >
           {{ item.name }}
-          <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
+          @if (item.icon) {
+            <mat-icon class="ml-1.5 align-bottom">
+              {{ item.icon }}
+            </mat-icon>
+          }
         </a>
-      </ng-container>
-      <ng-template #router>
+      } @else {
         <a
           mat-list-item
           (click)="navBarService.toggle()"
           [routerLink]="item.routerLink"
         >
           {{ item.name }}
         </a>
-      </ng-template>
-    </ng-container>
-    <mat-divider></mat-divider>
-  </div>
+      }
+    }
+  }
+
   <mat-divider></mat-divider>
   <a
     mat-list-item
     (click)="navBarService.toggle()"
     href="https://github.com/DSD-DBS/capella-collab-manager/issues"
     target="_blank"
-    >Open issue on Github <mat-icon>open_in_new</mat-icon></a
   >
+    Open issue on Github
+    <mat-icon class="ml-1.5 align-bottom">open_in_new</mat-icon>
+  </a>
+
   <mat-divider></mat-divider>
   <a
     mat-list-item
@@ -46,34 +52,34 @@
   >
     Profile
   </a>
+
   <mat-divider></mat-divider>
-  <a
-    mat-list-item
-    (click)="navBarService.toggle()"
-    *ngIf="userService.user?.role === 'administrator'"
-    routerLink="settings"
-    >Settings</a
-  >
-  <mat-divider></mat-divider>
-  <a
-    mat-list-item
-    (click)="navBarService.toggle()"
-    *ngIf="userService.user?.role === 'administrator'"
-    routerLink="events"
-    >Events</a
-  >
-  <mat-divider></mat-divider>
+  @if (userService.user?.role === "administrator") {
+    <a mat-list-item (click)="navBarService.toggle()" routerLink="settings">
+      Settings
+    </a>
+
+    <mat-divider></mat-divider>
+    <a mat-list-item (click)="navBarService.toggle()" routerLink="events">
+      Events
+    </a>
+
+    <mat-divider></mat-divider>
+  }
+
   <a mat-list-item (click)="navBarService.toggle()" routerLink="tokens">
     Tokens
   </a>
-  <mat-divider></mat-divider>
-  <a
-    mat-list-item
-    (click)="navBarService.toggle()"
-    routerLink="logout/redirect"
-    [queryParams]="{ reason: 'logout' }"
-    *ngIf="authService.isLoggedIn()"
-  >
-    Log out <mat-icon class="ml-2.5">logout</mat-icon>
-  </a>
+
+  @if (authService.isLoggedIn()) {
+    <mat-divider></mat-divider>
+    <a
+      mat-list-item
+      (click)="navBarService.toggle()"
+      routerLink="logout/redirect"
+      [queryParams]="{ reason: 'logout' }"
+    >
+      Log out <mat-icon class="ml-2.5 align-bottom">logout</mat-icon>
+    </a>
+  }
 </mat-list>

frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.ts

@@ -11,7 +11,6 @@ import { UserService } from 'src/app/services/user/user.service';
 @Component({
   selector: 'app-nav-bar-menu',
   templateUrl: './nav-bar-menu.component.html',
-  styleUrls: ['./nav-bar-menu.component.css'],
 })
 export class NavBarMenuComponent {
   constructor(

frontend/src/app/helpers/confirmation-dialog/confirmation-dialog.component.html

@@ -7,22 +7,21 @@
   <form (submit)="onSubmit()">
     <h2 class="mb-5 text-xl font-medium">{{ data.title }}</h2>
     <p>{{ data.text }}</p>
-    <p *ngIf="data.requiredInput">
-      Please type in <span class="font-bold">{{ data.requiredInput }}</span> to
-      confirm the action:
-    </p>
-    <mat-form-field
-      class="w-full"
-      appearance="outline"
-      *ngIf="data.requiredInput"
-    >
-      <input
-        matInput
-        [(ngModel)]="inputText"
-        name="inputText"
-        placeholder="Type here..."
-      />
-    </mat-form-field>
+    @if (data.requiredInput) {
+      <p>
+        Please type in
+        <span class="font-bold">{{ data.requiredInput }}</span> to confirm the
+        action:
+      </p>
+      <mat-form-field class="w-full" appearance="outline">
+        <input
+          matInput
+          [(ngModel)]="inputText"
+          name="inputText"
+          placeholder="Type here..."
+        />
+      </mat-form-field>
+    }
     <div class="mt-2 flex justify-between">
       <button
         mat-flat-button