chore: More migration to new Angular control flow

frontend/src/app/projects/create-project/create-project.component.html

@@ -25,14 +25,16 @@ <h3 class="flex justify-center sm:hidden">Create new project</h3>
                   formControlName="name"
                   data-testId="input-name"
                 />
-                <mat-error *ngIf="form.controls.name.errors?.uniqueSlug">
-                  A project with a name similar to “{{
-                    form.controls.name.errors!.uniqueSlug.value
-                  }}” already exists.
-                </mat-error>
-                <mat-error *ngIf="form.controls.name.errors?.required">
-                  A project name is required.
-                </mat-error>
+                @if (form.controls.name.errors?.uniqueSlug) {
+                  <mat-error>
+                    A project with a name similar to “{{
+                      form.controls.name.errors!.uniqueSlug.value
+                    }}” already exists.
+                  </mat-error>
+                }
+                @if (form.controls.name.errors?.required) {
+                  <mat-error> A project name is required. </mat-error>
+                }
               </mat-form-field>
             </div>
             <div>
@@ -93,39 +95,40 @@ <h3 class="flex justify-center sm:hidden">Create new project</h3>
         <div class="hidden sm:inline">(Optional) Add team members</div>
       </ng-template>
       <h3 class="flex justify-center sm:hidden">(Optional) Add team members</h3>
-      <div *ngIf="projectService.project$ | async" class="flex justify-center">
-        <app-project-user-settings></app-project-user-settings>
-      </div>
-      <div *ngIf="projectService.project$ | async">
-        <div class="flex justify-between">
-          <div></div>
-          <div>
-            <div class="flex w-[312px] justify-end sm:w-[420px]">
-              <a
-                class="mt-[5px]"
-                mat-button
-                color="primary"
-                (click)="stepper.next()"
-                data-testId="button-skipAddMembers"
-              >
-                <ng-container
-                  *ngIf="
-                    projectUserService.nonAdminProjectUsers$ | async as users
-                  "
-                >
-                  {{
-                    !users || users.length === 0 ? "Skip for now" : "Continue"
-                  }}
-                </ng-container>
-                <mat-icon iconPositionEnd class="mat-icon-position right"
-                  >navigate_next</mat-icon
+      @if (projectService.project$ | async) {
+        <div class="flex justify-center">
+          <app-project-user-settings></app-project-user-settings>
+        </div>
+        <div>
+          <div class="flex justify-between">
+            <div></div>
+            <div>
+              <div class="flex w-[312px] justify-end sm:w-[420px]">
+                <a
+                  class="mt-[5px]"
+                  mat-button
+                  color="primary"
+                  (click)="stepper.next()"
+                  data-testId="button-skipAddMembers"
                 >
-              </a>
+                  @if (
+                    projectUserService.nonAdminProjectUsers$ | async;
+                    as users
+                  ) {
+                    {{
+                      !users || users.length === 0 ? "Skip for now" : "Continue"
+                    }}
+                  }
+                  <mat-icon iconPositionEnd class="mat-icon-position right"
+                    >navigate_next</mat-icon
+                  >
+                </a>
+              </div>
             </div>
+            <div></div>
           </div>
-          <div></div>
         </div>
-      </div>
+      }
     </mat-step>
 
     <mat-step>
@@ -156,20 +159,14 @@ <h3 class="flex justify-center pb-[5px] sm:hidden sm:pb-0">
               [color]="getColorByModelCreationStep()"
               data-testId="a-skipModelAndFinishProjectCreation"
             >
-              <span *ngIf="modelCreationStep === 'create-model'">
-                Abort model creation and finish
-              </span>
-              <span
-                *ngIf="
-                  modelCreationStep !== 'create-model' &&
-                  modelCreationStep !== 'complete'
-                "
-              >
-                Abort model creation and finish
-              </span>
-              <span *ngIf="modelCreationStep === 'complete'">
-                Finish project creation
-              </span>
+              @if (modelCreationStep === "create-model") {
+                <span> Abort model creation and finish </span>
+              } @else if (modelCreationStep === "complete") {
+                <span> Finish project creation </span>
+              } @else {
+                <span> Abort model creation and finish </span>
+              }
+
               <mat-icon iconPositionEnd class="mat-icon-position right"
                 >check</mat-icon
               >

frontend/src/app/projects/create-project/create-project.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgFor, AsyncPipe } from '@angular/common';
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {
   FormControl,
@@ -32,7 +32,6 @@ import { ProjectWrapperService } from '../service/project.service';
 @Component({
   selector: 'app-create-project',
   templateUrl: './create-project.component.html',
-  styleUrls: ['./create-project.component.css'],
   standalone: true,
   imports: [
     MatStepper,
@@ -43,7 +42,6 @@ import { ProjectWrapperService } from '../service/project.service';
     MatFormField,
     MatLabel,
     MatInput,
-    NgIf,
     MatError,
     MatRadioGroup,
     NgFor,

frontend/src/app/projects/create-project/create-project.stories.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { CreateProjectComponent } from './create-project.component';
+
+const meta: Meta<CreateProjectComponent> = {
+  title: 'Project Components / Create Project',
+  component: CreateProjectComponent,
+};
+
+export default meta;
+type Story = StoryObj<CreateProjectComponent>;
+
+export const General: Story = {
+  args: {},
+};

frontend/src/app/projects/models/init-model/init-model.component.html

@@ -4,53 +4,56 @@
  -->
 
 <div class="wrapper flex justify-center">
-  <div
-    class="collab-card w-[350px] sm:min-w-[420px]"
-    *ngIf="modelService.model$ | async"
-  >
-    <form [formGroup]="form">
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Modelling tool</mat-label>
-        <input
-          matInput
-          [value]="(modelService.model$ | async)!.tool.name"
-          disabled
-        />
-      </mat-form-field>
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Version</mat-label>
-        <mat-select formControlName="version" id="version-selector">
-          <mat-option
-            *ngFor="let version of this.toolVersions"
-            [value]="version.id"
-          >
-            {{ version.name }}
-            <span *ngIf="version.config.is_recommended"> (recommended)</span>
-            <span *ngIf="version.config.is_deprecated"> (deprecated)</span>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="w-full" appearance="fill">
-        <mat-label>Model nature</mat-label>
-        <mat-select formControlName="nature">
-          <mat-option
-            *ngFor="let nature of this.toolNatures"
-            [value]="nature.id"
-          >
-            {{ nature.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </form>
-    <div class="flex justify-end">
-      <button
-        mat-raised-button
-        color="primary"
-        [disabled]="!form.valid || buttonDisabled"
-        (click)="onSubmit()"
-      >
-        Save model
-      </button>
+  @if (modelService.model$ | async) {
+    <div class="collab-card w-[350px] sm:min-w-[420px]">
+      <form [formGroup]="form">
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Modelling tool</mat-label>
+          <input
+            matInput
+            [value]="(modelService.model$ | async)!.tool.name"
+            disabled
+          />
+        </mat-form-field>
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Version</mat-label>
+          <mat-select formControlName="version" id="version-selector">
+            <mat-option
+              *ngFor="let version of this.toolVersions"
+              [value]="version.id"
+            >
+              {{ version.name }}
+              @if (version.config.is_recommended) {
+                <span> (recommended)</span>
+              }
+              @if (version.config.is_deprecated) {
+                <span> (deprecated)</span>
+              }
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="w-full" appearance="fill">
+          <mat-label>Model nature</mat-label>
+          <mat-select formControlName="nature">
+            <mat-option
+              *ngFor="let nature of this.toolNatures"
+              [value]="nature.id"
+            >
+              {{ nature.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </form>
+      <div class="flex justify-end">
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!form.valid || buttonDisabled"
+          (click)="onSubmit()"
+        >
+          Save model
+        </button>
+      </div>
     </div>
-  </div>
+  }
 </div>

frontend/src/app/projects/models/init-model/init-model.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgFor, AsyncPipe } from '@angular/common';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
   FormControl,
@@ -34,10 +34,8 @@ import { ProjectWrapperService } from '../../service/project.service';
 @Component({
   selector: 'app-init-model',
   templateUrl: './init-model.component.html',
-  styleUrls: ['./init-model.component.css'],
   standalone: true,
   imports: [
-    NgIf,
     FormsModule,
     ReactiveFormsModule,
     MatFormField,

frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html

@@ -9,18 +9,21 @@
         <mat-form-field appearance="fill" class="w-full max-w-lg">
           <mat-label>Name</mat-label>
           <input matInput formControlName="name" />
-          <mat-error *ngIf="form.controls.name.errors?.required"
-            >The project name is required.</mat-error
-          >
-          <mat-error *ngIf="form.controls.name.errors?.uniqueSlug"
-            >A project with a similar name already exists.</mat-error
-          >
-          <mat-hint
-            *ngIf="project?.slug !== newSlug && form.controls.name.valid"
-            >If you proceed, the project slug will be changed to
-            <i>{{ newSlug }}</i> - Please make sure to update all
-            references.</mat-hint
-          >
+          @if (form.controls.name.errors?.required) {
+            <mat-error>The project name is required.</mat-error>
+          }
+
+          @if (form.controls.name.errors?.uniqueSlug) {
+            <mat-error>A project with a similar name already exists.</mat-error>
+          }
+
+          @if (project?.slug !== newSlug && form.controls.name.valid) {
+            <mat-hint
+              >If you proceed, the project slug will be changed to
+              <i>{{ newSlug }}</i> - Please make sure to update all
+              references.</mat-hint
+            >
+          }
         </mat-form-field>
       </div>
       <div>

frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgFor } from '@angular/common';
+import { NgFor } from '@angular/common';
 import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import {
   FormControl,
@@ -34,15 +34,13 @@ import { ProjectWrapperService } from '../../service/project.service';
 @Component({
   selector: 'app-edit-project-metadata',
   templateUrl: './edit-project-metadata.component.html',
-  styleUrls: ['./edit-project-metadata.component.css'],
   standalone: true,
   imports: [
     FormsModule,
     ReactiveFormsModule,
     MatFormField,
     MatLabel,
     MatInput,
-    NgIf,
     MatError,
     MatHint,
     MatRadioGroup,