feat: update to angular 17

backend/backend/package.json

@@ -64,7 +64,7 @@
     "express-prom-bundle": "6.6.0",
     "express-promise-router": "4.1.1",
     "got": "12.6.0",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
     "morgan": "1.10.0",
     "nock": "13.3.1",
     "node-cache": "5.1.2",
@@ -98,9 +98,9 @@
     "sinon": "15.0.4",
     "sinon-express-mock": "2.2.1",
     "supertest": "6.3.3",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsup": "6.7.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "tsup": {
     "entry": [

backend/proxy/package.json

@@ -50,8 +50,8 @@
     "dockerode": "3.3.5",
     "is-cidr": "4.0.2",
     "mustache": "4.2.0",
-    "semver": "7.5.4",
+    "semver": "7.6.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "devDependencies": {
     "@openstapps/api-cli": "workspace:*",
@@ -65,7 +65,7 @@
     "@types/mustache": "4.2.2",
     "@types/node": "18.15.3",
     "@types/proxyquire": "1.3.28",
-    "@types/semver": "7.5.6",
+    "@types/semver": "7.5.8",
     "@types/sha1": "1.1.3",
     "@types/sinon": "10.0.14",
     "@types/sinon-chai": "3.2.9",
@@ -75,7 +75,7 @@
     "mocha-junit-reporter": "2.2.0",
     "sinon": "15.0.4",
     "sinon-chai": "3.7.0",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsup": "6.7.0"
   },
   "tsup": {

configuration/eslint-config/package.json

@@ -18,16 +18,15 @@
   "devDependencies": {
     "@openstapps/tsconfig": "workspace:*",
     "@types/node": "18.15.3",
-    "eslint": "8.43.0",
+    "eslint": "8.57.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/parser": "7.2.0",
-    "eslint": "8.43.0",
+    "eslint": "8.57.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsdoc": "46.4.2",
+    "eslint-plugin-jsdoc": "48.2.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-unicorn": "51.0.1"
-    "eslint-plugin-unicorn": "47.0.0"
   }
 }

configuration/projectmanagement/package.json

@@ -43,8 +43,8 @@
     "@openstapps/logger": "workspace:*",
     "@slack/web-api": "6.8.1",
     "commander": "10.0.0",
-    "date-fns": "2.30.0",
+    "date-fns": "3.6.0",
-    "glob": "10.2.7",
+    "glob": "10.3.10",
     "mustache": "4.2.0"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "@openstapps/tsconfig": "workspace:*",
     "@types/chai": "4.3.5",
     "@types/chai-as-promised": "7.1.5",
-    "@types/glob": "8.0.1",
+    "@types/glob": "8.1.0",
     "@types/mocha": "10.0.1",
     "@types/mustache": "4.2.2",
     "@types/node": "18.15.3",
@@ -63,9 +63,9 @@
     "chai-as-promised": "7.1.1",
     "mocha": "10.2.0",
     "mocha-junit-reporter": "2.2.0",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsup": "6.7.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "tsup": {
     "entry": [

examples/minimal-connector/package.json

@@ -53,9 +53,9 @@
     "mocha": "10.2.0",
     "mocha-junit-reporter": "2.2.0",
     "nock": "13.3.1",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsup": "6.7.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "tsup": {
     "entry": [

examples/minimal-plugin/package.json

@@ -35,7 +35,7 @@
     "@openstapps/logger": "workspace:*",
     "commander": "10.0.0",
     "express": "4.18.2",
-    "ts-node": "10.9.1"
+    "ts-node": "10.9.2"
   },
   "devDependencies": {
     "@openstapps/eslint-config": "workspace:*",
@@ -44,7 +44,7 @@
     "@types/express": "4.17.17",
     "@types/node": "18.15.3",
     "tsup": "6.7.0",
-    "typescript": "5.1.6"
+    "typescript": "5.4.2"
   },
   "tsup": {
     "entry": [

frontend/app/.browserslistrc

@@ -5,10 +5,4 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
+> 0.5% in DE and last 2 major versions and supports es6 and not dead
-last 2 versions
-Firefox ESR
-not dead
-not kaios 2.5
-not op_mini all
-not IE 9-11

frontend/app/angular.json

@@ -97,20 +97,20 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             },
             "development": {
-              "browserTarget": "app:build:development"
+              "buildTarget": "app:build:development"
             },
             "ci": {
-              "browserTarget": "app:build"
+              "buildTarget": "app:build"
             },
             "fake": {
-              "browserTarget": "app:build:fake"
+              "buildTarget": "app:build:fake"
             }
           },
           "defaultConfiguration": "development"

frontend/app/cypress/integration/dashboard.spec.ts

@@ -173,7 +173,7 @@ describe('dashboard', async function () {
       cy.visit('/overview');
 
       cy.get('ion-searchbar').click({scrollBehavior: 'center'});
-      cy.url().should('eq', Cypress.config().baseUrl + '/search');
+      cy.url().should('include', '/search');
       cy.get('ion-searchbar').should('not.have.value');
       cy.get('ion-searchbar input.searchbar-input').should('have.focus');
 

frontend/app/package.json

@@ -52,34 +52,34 @@
     "test:integration": "sh integration-test.sh"
   },
   "dependencies": {
-    "@angular/animations": "16.1.4",
+    "@angular/animations": "17.3.0",
-    "@angular/cdk": "16.1.4",
+    "@angular/cdk": "17.3.0",
-    "@angular/common": "16.1.4",
+    "@angular/common": "17.3.0",
-    "@angular/core": "16.1.4",
+    "@angular/core": "17.3.0",
-    "@angular/forms": "16.1.4",
+    "@angular/forms": "17.3.0",
-    "@angular/platform-browser": "16.1.4",
+    "@angular/platform-browser": "17.3.0",
-    "@angular/router": "16.1.4",
+    "@angular/router": "17.3.0",
-    "@asymmetrik/ngx-leaflet": "16.0.1",
+    "@asymmetrik/ngx-leaflet": "17.0.0",
-    "@asymmetrik/ngx-leaflet-markercluster": "16.0.0",
+    "@asymmetrik/ngx-leaflet-markercluster": "17.0.0",
-    "@awesome-cordova-plugins/calendar": "5.45.0",
+    "@awesome-cordova-plugins/calendar": "6.6.0",
-    "@awesome-cordova-plugins/core": "5.45.0",
+    "@awesome-cordova-plugins/core": "6.6.0",
-    "@capacitor/app": "5.0.6",
+    "@capacitor/app": "5.0.7",
-    "@capacitor/browser": "5.1.0",
+    "@capacitor/browser": "5.2.0",
-    "@capacitor/clipboard": "5.0.6",
+    "@capacitor/clipboard": "5.0.7",
-    "@capacitor/core": "5.5.0",
+    "@capacitor/core": "5.7.3",
-    "@capacitor/device": "5.0.6",
+    "@capacitor/device": "5.0.7",
-    "@capacitor/dialog": "5.0.6",
+    "@capacitor/dialog": "5.0.7",
-    "@capacitor/filesystem": "5.1.4",
+    "@capacitor/filesystem": "5.2.1",
-    "@capacitor/geolocation": "5.0.6",
+    "@capacitor/geolocation": "5.0.7",
-    "@capacitor/haptics": "5.0.6",
+    "@capacitor/haptics": "5.0.7",
-    "@capacitor/keyboard": "5.0.6",
+    "@capacitor/keyboard": "5.0.8",
-    "@capacitor/local-notifications": "5.0.6",
+    "@capacitor/local-notifications": "5.0.7",
-    "@capacitor/network": "5.0.6",
+    "@capacitor/network": "5.0.7",
-    "@capacitor/preferences": "5.0.6",
+    "@capacitor/preferences": "5.0.7",
-    "@capacitor/share": "5.0.6",
+    "@capacitor/share": "5.0.7",
-    "@capacitor/splash-screen": "5.0.6",
+    "@capacitor/splash-screen": "5.0.7",
     "@ionic-native/core": "5.36.0",
-    "@ionic/angular": "7.1.3",
+    "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
@@ -87,104 +87,103 @@
     "@openstapps/api": "workspace:*",
     "@openstapps/collection-utils": "workspace:*",
     "@openstapps/core": "workspace:*",
-    "@transistorsoft/capacitor-background-fetch": "5.1.1",
+    "@transistorsoft/capacitor-background-fetch": "5.2.0",
-    "@types/dom-view-transitions": "1.0.1",
+    "@types/dom-view-transitions": "1.0.4",
     "capacitor-secure-storage-plugin": "0.9.0",
     "cordova-plugin-calendar": "5.1.6",
-    "date-fns": "2.30.0",
+    "date-fns": "3.6.0",
     "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
     "jsonpath-plus": "6.0.1",
-    "leaflet": "1.9.3",
+    "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3",
-    "material-symbols": "0.10.0",
+    "material-symbols": "0.17.0",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
-    "ngx-date-fns": "10.0.1",
+    "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",
-    "ngx-markdown": "16.0.0",
+    "ngx-markdown": "17.1.1",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
     "rxjs": "7.8.1",
-    "semver": "7.5.4",
+    "semver": "7.6.0",
     "swiper": "8.4.5",
-    "tslib": "2.4.1",
+    "tslib": "2.6.2",
-    "zone.js": "0.13.1"
+    "zone.js": "0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1601.4",
+    "@angular-devkit/architect": "0.1703.0",
-    "@angular-devkit/build-angular": "16.1.4",
+    "@angular-devkit/build-angular": "17.3.0",
-    "@angular-devkit/core": "16.1.4",
+    "@angular-devkit/core": "17.3.0",
-    "@angular-devkit/schematics": "16.1.4",
+    "@angular-devkit/schematics": "17.3.0",
-    "@angular-eslint/builder": "16.1.0",
+    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "16.1.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "16.1.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "16.1.0",
+    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "16.1.0",
+    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "16.1.4",
+    "@angular/cli": "17.3.0",
-    "@angular/compiler": "16.1.4",
+    "@angular/compiler": "17.3.0",
-    "@angular/compiler-cli": "16.1.4",
+    "@angular/compiler-cli": "17.3.0",
-    "@angular/language-service": "16.1.4",
+    "@angular/language-service": "17.3.0",
-    "@angular/platform-browser-dynamic": "16.1.4",
+    "@angular/platform-browser-dynamic": "17.3.0",
-    "@capacitor/android": "5.5.0",
+    "@capacitor/android": "5.7.3",
-    "@capacitor/assets": "3.0.1",
+    "@capacitor/assets": "3.0.4",
-    "@capacitor/cli": "5.5.0",
+    "@capacitor/cli": "5.7.3",
-    "@capacitor/ios": "5.5.0",
+    "@capacitor/ios": "5.7.3",
-    "@compodoc/compodoc": "1.1.19",
+    "@compodoc/compodoc": "1.1.23",
-    "@cypress/schematic": "1.7.0",
+    "@cypress/schematic": "2.5.1",
-    "@ionic/angular-toolkit": "10.0.0",
+    "@ionic/angular-toolkit": "11.0.1",
-    "@ionic/cli": "7.1.1",
+    "@ionic/cli": "7.2.0",
     "@openstapps/prettier-config": "workspace:*",
     "@openstapps/tsconfig": "workspace:*",
-    "@types/fontkit": "1.8.0",
+    "@types/fontkit": "2.0.7",
     "@types/geojson": "1.0.6",
-    "@types/glob": "8.0.1",
+    "@types/glob": "8.1.0",
-    "@types/jasmine": "4.3.1",
+    "@types/jasmine": "5.1.4",
-    "@types/jasminewd2": "2.0.10",
+    "@types/jasminewd2": "2.0.13",
     "@types/jsonpath": "0.2.0",
-    "@types/karma": "6.3.4",
+    "@types/karma": "6.3.8",
-    "@types/karma-coverage": "2.0.1",
+    "@types/karma-coverage": "2.0.3",
-    "@types/karma-jasmine": "4.0.2",
+    "@types/karma-jasmine": "4.0.5",
-    "@types/leaflet": "1.9.0",
+    "@types/leaflet": "1.9.8",
-    "@types/leaflet.markercluster": "1.5.1",
+    "@types/leaflet.markercluster": "1.5.4",
     "@types/node": "18.15.3",
-    "@types/semver": "7.5.6",
+    "@types/semver": "7.5.8",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/parser": "7.2.0",
     "cordova-res": "0.15.4",
-    "cypress": "13.2.0",
+    "cypress": "13.7.0",
-    "eslint": "8.43.0",
+    "eslint": "8.57.0",
-    "eslint-plugin-jsdoc": "46.4.2",
+    "eslint-plugin-jsdoc": "48.2.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-unicorn": "47.0.0",
+    "eslint-plugin-unicorn": "51.0.1",
     "fast-deep-equal": "3.1.3",
     "fontkit": "2.0.2",
-    "glob": "10.2.7",
+    "glob": "10.3.10",
     "http-server": "14.1.1",
     "is-docker": "2.2.1",
-    "jasmine-core": "5.0.1",
+    "jasmine-core": "5.1.2",
     "jasmine-spec-reporter": "7.0.0",
     "jetifier": "2.0.0",
-    "junit-report-merger": "6.0.2",
+    "junit-report-merger": "6.0.3",
-    "karma": "6.4.2",
+    "karma": "6.4.3",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "15.10.1",
+    "stylelint": "16.2.1",
-    "stylelint-config-clean-order": "5.0.1",
+    "stylelint-config-clean-order": "5.4.1",
     "stylelint-config-prettier-scss": "1.0.0",
-    "stylelint-config-recommended-scss": "12.0.0",
+    "stylelint-config-recommended-scss": "14.0.0",
-    "stylelint-config-standard-scss": "10.0.0",
+    "stylelint-config-standard-scss": "13.0.0",
     "surge": "0.23.1",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
-    "typescript": "5.1.6",
+    "typescript": "5.4.2",
-    "webpack-bundle-analyzer": "4.7.0"
+    "webpack-bundle-analyzer": "4.10.1"
   },
-  "prettier": "@openstapps/prettier-config",
   "cordova": {
     "plugins": {},
     "platforms": [

frontend/app/prettier.config.mjs

@@ -1,3 +1,4 @@
+// @ts-check
 /*
  * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -25,7 +26,6 @@ const config = {
       },
     },
   ],
-  ignorePath: ['.prettierignore', '../../.gitignore'],
 };
 
 export default config;

frontend/app/src/app/animation/fab-expand.ts

@@ -14,7 +14,7 @@
  */
 
 import {AnimationBuilder, AnimationController} from '@ionic/angular';
-import {AnimationOptions} from '@ionic/angular/providers/nav-controller';
+import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
 import {iosDuration, iosEasing, mdDuration, mdEasing} from './easings';
 
 /**

frontend/app/src/app/modules/about/about-licenses.html

@@ -24,21 +24,16 @@
 </ion-header>
 <ion-content parallax>
   <div class="licenses-content">
-    <ion-card
+    @for (license of licenses; track license) {
-      *ngFor="let license of licenses"
+      <ion-card [href]="license.url || license.repository" rel="external" target="_blank">
-      [href]="license.url || license.repository"
-      rel="external"
-      target="_blank"
-    >
         <ion-card-header>
           <ion-card-title>
             {{ license.name }}
             <ion-icon [size]="16" [weight]="300" class="supertext-icon" name="open_in_browser"></ion-icon>
           </ion-card-title>
-
+          @if (license.authors || license.publisher) {
-        <ion-card-subtitle *ngIf="license.authors || license.publisher">
+            <ion-card-subtitle> {{ license.authors || license.publisher }} </ion-card-subtitle>
-          {{ license.authors || license.publisher }}
+          }
-        </ion-card-subtitle>
         </ion-card-header>
         <ion-card-content>
           <ion-chip (click)="$event.preventDefault(); viewLicense(license)">
@@ -47,5 +42,6 @@
           </ion-chip>
         </ion-card-content>
       </ion-card>
+    }
   </div>
 </ion-content>

frontend/app/src/app/modules/about/about-page/about-page-content.html

@@ -13,9 +13,13 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<markdown *ngIf="content.type === 'markdown'" [data]="'value' | translateSimple : content"></markdown>
+@if (content.type === 'markdown') {
-<div *ngIf="content.type ==='section'">
+  <markdown [data]="'value' | translateSimple: content"></markdown>
-  <ion-card *ngIf="content.card; else noCard">
+}
+@if (content.type === 'section') {
+  <div>
+    @if (content.card) {
+      <ion-card>
         <ion-card-header>
           <ion-card-title>{{ 'title' | translateSimple: content }}</ion-card-title>
         </ion-card-header>
@@ -23,19 +27,30 @@
           <about-page-content [content]="content.content"></about-page-content>
         </ion-card-content>
       </ion-card>
-  <ng-template #noCard>
+    } @else {
       <h2>{{ 'title' | translateSimple: content }}</h2>
       <about-page-content [content]="content.content"></about-page-content>
-  </ng-template>
+    }
   </div>
-<ion-grid *ngIf="content.type === 'table'">
+}
-  <ion-row *ngFor="let row of content.rows">
+@if (content.type === 'table') {
-    <ion-col *ngFor="let col of row">
+  <ion-grid>
+    @for (row of content.rows; track row) {
+      <ion-row>
+        @for (col of row; track col) {
+          <ion-col>
             <about-page-content [content]="col"></about-page-content>
           </ion-col>
+        }
       </ion-row>
+    }
   </ion-grid>
-<ion-item *ngIf="content.type === 'router link'" [routerLink]="content.link">
+}
-  <ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
+@if (content.type === 'router link') {
+  <ion-item [routerLink]="content.link">
+    @if (content.icon) {
+      <ion-icon [name]="content.icon" slot="start"></ion-icon>
+    }
     <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
   </ion-item>
+}

frontend/app/src/app/modules/about/about-page/about-page.html

@@ -18,15 +18,20 @@
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    <ion-title *ngIf="content; else titleLoading">{{ 'title' | translateSimple : content }}</ion-title>
+    @if (content) {
-    <ng-template #titleLoading>
+      <ion-title>{{ 'title' | translateSimple: content }}</ion-title>
+    } @else {
       <ion-title><ion-skeleton-text animated="true"></ion-skeleton-text></ion-title>
-    </ng-template>
+    }
   </ion-toolbar>
 </ion-header>
-<ion-content parallax *ngIf="content">
+@if (content) {
+  <ion-content parallax>
     <ion-text>{{ 'about.VERSION_INFO' | translate: {name, version, stappsVersion} }}</ion-text>
     <div class="page-content">
-    <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
+      @for (element of content.content; track element) {
+        <about-page-content [content]="element"></about-page-content>
+      }
     </div>
   </ion-content>
+}

frontend/app/src/app/modules/about/release-notes.component.ts

@@ -5,7 +5,6 @@ import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {IonicModule, ModalController} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {UtilModule} from '../../util/util.module';
-import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'stapps-release-notes',
@@ -13,7 +12,7 @@ import {CommonModule} from '@angular/common';
   styleUrls: ['release-notes.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [UtilModule, MarkdownModule, ThingTranslateModule, IonicModule, TranslateModule, CommonModule],
+  imports: [UtilModule, MarkdownModule, ThingTranslateModule, IonicModule, TranslateModule],
 })
 export class ReleaseNotesComponent {
   @Input() versionInfos: SCAppVersionInfo[];

frontend/app/src/app/modules/about/release-notes.html

@@ -1,18 +1,20 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title><span class="ion-text-wrap">{{'releaseNotes.TITLE_UPDATED' | translate}}</span></ion-title>
+    <ion-title
-    <ion-buttons slot="end">
+      ><span class="ion-text-wrap">{{ 'releaseNotes.TITLE_UPDATED' | translate }}</span></ion-title
-      <ion-button [strong]="true" (click)="modalController.dismiss()"
-        >{{'modal.DISMISS_NEUTRAL' | translate}}</ion-button
     >
+    <ion-buttons slot="end">
+      <ion-button [strong]="true" (click)="modalController.dismiss()">{{
+        'modal.DISMISS_NEUTRAL' | translate
+      }}</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content parallax>
-  <ng-container *ngFor="let versionInfo of versionInfos">
+  @for (versionInfo of versionInfos; track versionInfo) {
     <markdown
       class="content-card ion-padding"
       [data]="'releaseNotes' | translateSimple: versionInfo"
     ></markdown>
-  </ng-container>
+  }
 </ion-content>

frontend/app/src/app/modules/assessments/types/assessment/assessment-base-info.html

@@ -14,8 +14,12 @@
   -->
 
 <ion-label [color]="passed ? undefined : 'danger'"
-  >{{ (_item.grade | isNumeric) ? (_item.grade | numberLocalized :
+  >{{
-  'minimumFractionDigits:1,maximumFractionDigits:1') : '' }} {{ 'status' | thingTranslate : _item | titlecase
+    (_item.grade | isNumeric)
-  }}, {{ 'attempt' | propertyNameTranslate : _item }} {{ _item.attempt }}
+      ? (_item.grade | numberLocalized: 'minimumFractionDigits:1,maximumFractionDigits:1')
+      : ''
+  }}
+  {{ 'status' | thingTranslate: _item | titlecase }}, {{ 'attempt' | propertyNameTranslate: _item }}
+  {{ _item.attempt }}
 </ion-label>
 <ion-note> {{ _item.ects }} {{ 'ects' | propertyNameTranslate: _item }}</ion-note>

frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.html

@@ -15,10 +15,14 @@
 
 <ion-card>
   <ion-card-content>
-    <ion-note *ngIf="item.courseOfStudy as courseOfStudy">
+    @if (item.courseOfStudy; as courseOfStudy) {
-      {{ $any('courseOfStudy' | propertyNameTranslate : item) | titlecase }}: {{ 'name' | thingTranslate :
+      <ion-note>
-      $any(courseOfStudy) }} ({{ 'academicDegree' | thingTranslate : $any(courseOfStudy) }})
+        {{ $any('courseOfStudy' | propertyNameTranslate: item) | titlecase }}:
+        {{ 'name' | thingTranslate: $any(courseOfStudy) }} ({{
+          'academicDegree' | thingTranslate: $any(courseOfStudy)
+        }})
       </ion-note>
+    }
   </ion-card-content>
 </ion-card>
 <ion-list class="container">

frontend/app/src/app/modules/calendar/add-event-review-modal.html

@@ -22,34 +22,46 @@
 
   <ion-card-content>
     <ion-list lines="none">
-      <ion-item-group *ngFor="let event of iCalEvents">
+      @for (event of iCalEvents; track event) {
+        <ion-item-group>
           <ion-item-divider>
             <ion-label>{{ event.title }}</ion-label>
-          <ion-note slot="start" *ngIf="event.events.length > 1">
+            @if (event.events.length > 1) {
+              <ion-note slot="start">
                 <ion-icon name="insert_page_break"></ion-icon>
               </ion-note>
+            }
           </ion-item-divider>
-        <ion-item *ngFor="let iCalEvent of event.events">
+          @for (iCalEvent of event.events; track iCalEvent) {
+            <ion-item>
               <ion-label>
-            <s *ngIf="iCalEvent.cancelled; else date"
+                @if (iCalEvent.cancelled) {
-              ><ng-container [ngTemplateOutlet]="date"></ng-container>
+                  <s><ng-container [ngTemplateOutlet]="date"></ng-container> </s>
-            </s>
+                } @else {
+                  {{ moment(iCalEvent.start) | amDateFormat: 'll, HH:mm' }}
+                }
                 <ng-template #date> {{ moment(iCalEvent.start) | amDateFormat: 'll, HH:mm' }} </ng-template>
               </ion-label>
-          <ion-note *ngIf="iCalEvent.rrule">
+              @if (iCalEvent.rrule) {
+                <ion-note>
                   {{ iCalEvent.rrule.interval }} {{ iCalEvent.rrule.freq | sentencecase }}
                 </ion-note>
-          <ion-icon *ngIf="iCalEvent.rrule" name="event_repeat"></ion-icon>
+              }
+              @if (iCalEvent.rrule) {
+                <ion-icon name="event_repeat"></ion-icon>
+              }
             </ion-item>
+          }
         </ion-item-group>
+      }
     </ion-list>
   </ion-card-content>
 
   <div class="horizontal-flex">
     <ion-item lines="none">
-      <ion-checkbox [(ngModel)]="includeCancelled"
+      <ion-checkbox [(ngModel)]="includeCancelled">{{
-        >{{ 'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate }}</ion-checkbox
+        'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate
-      >
+      }}</ion-checkbox>
     </ion-item>
   </div>
   <div class="horizontal-flex">
@@ -57,15 +69,16 @@
       {{ 'share' | translate }}
       <ion-icon slot="end" md="share" ios="ios_share"></ion-icon>
     </ion-button>
-    <ion-button fill="outline" (click)="download()" *ngIf="isWeb; else exportButton">
+    @if (isWeb) {
+      <ion-button fill="outline" (click)="download()">
         {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate }}
         <ion-icon slot="end" name="download"></ion-icon>
       </ion-button>
-    <ng-template #exportButton>
+    } @else {
       <ion-button fill="outline" (click)="toCalendar()">
         {{ 'schedule.toCalendar.reviewModal.EXPORT' | translate }}
         <ion-icon slot="end" name="event_upcoming"></ion-icon>
       </ion-button>
-    </ng-template>
+    }
   </div>
 </div>

frontend/app/src/app/modules/catalog/catalog.component.html

@@ -23,25 +23,36 @@
   </ion-toolbar>
   <ion-toolbar color="primary" mode="md">
     <ion-segment (ionChange)="segmentChanged($event)" [value]="selectedSemesterUID" mode="md">
-      <ion-segment-button *ngFor="let semester of availableSemesters" [value]="semester.uid">
+      @for (semester of availableSemesters; track semester) {
+        <ion-segment-button [value]="semester.uid">
           <ion-label>{{ semester.acronym }}</ion-label>
         </ion-segment-button>
+      }
     </ion-segment>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-list *ngIf="catalogs && catalogs.length > 0">
+  @if (catalogs && catalogs.length > 0) {
-    <ion-item *ngFor="let catalog of catalogs" button="true" lines="inset" (click)="notifySelect(catalog)">
+    <ion-list>
+      @for (catalog of catalogs; track catalog) {
+        <ion-item button="true" lines="inset" (click)="notifySelect(catalog)">
           <ion-label>
             <h2>{{ catalog.name }}</h2>
           </ion-label>
         </ion-item>
+      }
     </ion-list>
-  <ion-list *ngIf="!catalogs">
+  }
-    <stapps-skeleton-list-item *ngFor="let skeleton of [].constructor(10)"> </stapps-skeleton-list-item>
+  @if (!catalogs) {
+    <ion-list>
+      @for (skeleton of [].constructor(10); track skeleton) {
+        <stapps-skeleton-list-item> </stapps-skeleton-list-item>
+      }
     </ion-list>
-  <ion-grid *ngIf="catalogs && catalogs.length === 0">
+  }
+  @if (catalogs && catalogs.length === 0) {
+    <ion-grid>
       <ion-row>
         <ion-col>
           <div class="ion-text-center margin-top">
@@ -52,4 +63,5 @@
         </ion-col>
       </ion-row>
     </ion-grid>
+  }
 </ion-content>

frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.html

@@ -17,16 +17,18 @@
   <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/favorites']">
     <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
   </ion-button>
-  <simple-swiper *ngIf="items | async as items; else noItems" @fade>
+  @if (items | async; as items) {
+    <simple-swiper @fade>
+      @for (item of items; track item) {
         <stapps-data-list-item
-      *ngFor="let item of items"
           [hideThumbnail]="true"
           [listItemEndInteraction]="false"
           [item]="item"
           appearance="square"
         ></stapps-data-list-item>
+      }
     </simple-swiper>
-  <ng-template #noItems>
+  } @else {
     <ion-item class="nothing-selected" lines="none">
       <ion-label class="ion-text-wrap">
         {{ 'dashboard.favorites.no_favorite_prefix' | translate }}
@@ -34,5 +36,5 @@
         {{ 'dashboard.favorites.no_favorite_suffix' | translate }}
       </ion-label>
     </ion-item>
-  </ng-template>
+  }
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.html

@@ -17,27 +17,28 @@
   <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/jobs']">
     <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
   </ion-button>
-  <simple-swiper *ngIf="jobs | async as jobs; else noItems" @fade>
+  @if (jobs | async; as jobs) {
+    <simple-swiper @fade>
+      @for (item of jobs; track item) {
         <stapps-data-list-item
-      *ngFor="let item of jobs"
           [hideThumbnail]="true"
           [item]="item"
           appearance="square"
         ></stapps-data-list-item>
+      }
       <ion-item [routerLink]="['/jobs']" class="more-jobs" lines="none">
         <ion-label>{{ 'dashboard.jobs.title' | translate | titlecase }}</ion-label>
         <ion-icon color="medium" name="read_more" [size]="40"></ion-icon>
       </ion-item>
     </simple-swiper>
-  <ng-template #noItems>
+  } @else {
     <ion-item class="nothing-selected" lines="none">
       <ion-label class="ion-text-wrap">
         {{ 'dashboard.jobs.noJobs' | translate }}
       </ion-label>
     </ion-item>
-
     <ion-button slot="button-end" fill="clear" color="medium" [routerLink]="['/jobs']">
       <ion-icon slot="icon-only" name="search" [size]="24"></ion-icon>
     </ion-button>
-  </ng-template>
+  }
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.html

@@ -13,21 +13,25 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="dishes | async as dishes; else loading">
+@if (dishes | async; as dishes) {
-  <simple-swiper *ngIf="dishes.length > 0" @fade>
+  @if (dishes.length > 0) {
+    <simple-swiper @fade>
+      @for (dish of dishes; track dish) {
         <stapps-data-list-item
-      *ngFor="let dish of dishes"
           [hideThumbnail]="true"
           [item]="dish"
           appearance="square"
         ></stapps-data-list-item>
+      }
     </simple-swiper>
-  <ion-item class="no-dishes" *ngIf="!dishes || dishes.length === 0" lines="none">
+  }
+  @if (!dishes || dishes.length === 0) {
+    <ion-item class="no-dishes" lines="none">
       <ion-label>
         {{ 'dashboard.canteens.no_dishes_available' | translate }}
       </ion-label>
     </ion-item>
-</ng-container>
+  }
-<ng-template #loading>
+} @else {
   <div class="placeholder"></div>
-</ng-template>
+}

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.html

@@ -13,9 +13,9 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="items | async as items">
+@if (items | async; as items) {
-  <ng-container *ngIf="items.length !== 0; else nothingSelected">
+  @if (items.length !== 0) {
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track item) {
       <stapps-section @fade [item]="item" [title]="'name' | thingTranslate: item">
         <ion-button slot="button-end" fill="clear" color="medium" (click)="favoritesService.delete(item)">
           <ion-icon slot="icon-only" name="delete" [size]="24"></ion-icon>
@@ -23,9 +23,8 @@
         <stapps-opening-hours slot="subtitle" [openingHours]="$any(item).openingHours"></stapps-opening-hours>
         <stapps-mensa-section-content [item]="item"></stapps-mensa-section-content>
       </stapps-section>
-    </ng-container>
+    }
-  </ng-container>
+  } @else {
-  <ng-template #nothingSelected>
     <stapps-section [title]="'dashboard.canteens.title' | translate">
       <ion-item class="nothing-selected" lines="none">
         <ion-label class="ion-text-wrap">
@@ -35,5 +34,5 @@
         </ion-label>
       </ion-item>
     </stapps-section>
-  </ng-template>
+  }
-</ng-container>
+}

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.html

@@ -17,8 +17,11 @@
   <ion-button size="small" slot="button-end" fill="clear" color="medium" [routerLink]="['/news']">
     <ion-icon slot="icon-only" name="read_more"></ion-icon>
   </ion-button>
-  <simple-swiper class="news-swiper card-swiper" *ngIf="news | async as news" @fade>
+  @if (news | async; as news) {
-    <stapps-news-item *ngFor="let newsItem of news" [item]="newsItem"> </stapps-news-item>
+    <simple-swiper class="news-swiper card-swiper" @fade>
+      @for (newsItem of news; track newsItem) {
+        <stapps-news-item [item]="newsItem"> </stapps-news-item>
+      }
       <ion-item [routerLink]="['/news']" class="more-news" lines="none">
         <ion-label>{{ 'dashboard.news.moreNews' | translate | titlecase }}</ion-label>
         <ion-thumbnail class="ion-margin-end">
@@ -26,4 +29,5 @@
         </ion-thumbnail>
       </ion-item>
     </simple-swiper>
+  }
 </stapps-section>

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss

@@ -63,10 +63,10 @@ simple-swiper {
   .title {
     overflow: hidden;
     display: -webkit-box;
+    -webkit-box-orient: vertical;
 
     white-space: break-spaces;
 
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
 

frontend/app/src/app/modules/dashboard/sections/search-section/search-route-transition.ts

@@ -14,7 +14,7 @@
  */
 
 import {AnimationController} from '@ionic/angular';
-import {AnimationOptions} from '@ionic/angular/providers/nav-controller';
+import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
 
 /**
  *

frontend/app/src/app/modules/data/chips/action-chip-list.html

@@ -13,7 +13,13 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<stapps-locate-action-chip *ngIf="applicable.locate" [item]="item"></stapps-locate-action-chip>
+@if (applicable.locate) {
-<stapps-navigate-action-chip *ngIf="applicable.navigate" [item]="$any(item)"></stapps-navigate-action-chip>
+  <stapps-locate-action-chip [item]="item"></stapps-locate-action-chip>
+}
+@if (applicable.navigate) {
+  <stapps-navigate-action-chip [item]="$any(item)"></stapps-navigate-action-chip>
+}
 <!-- Add Event Chip needs to load data and should be the last -->
-<stapps-add-event-action-chip *ngIf="applicable.event" [item]="item"></stapps-add-event-action-chip>
+@if (applicable.event) {
+  <stapps-add-event-action-chip [item]="item"></stapps-add-event-action-chip>
+}

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.html

@@ -14,8 +14,8 @@
 -->
 
 <div class="stack-children">
+  @if (associatedDateSeries | async; as associatedDateSeries) {
     <ion-chip
-    *ngIf="associatedDateSeries | async as associatedDateSeries; else loading"
       @chipTransition
       [disabled]="disabled"
       (click)="$event.stopPropagation(); editModal.present()"
@@ -49,9 +49,9 @@
         </ng-template>
       </stapps-edit-modal>
     </ion-chip>
-  <ng-template #loading>
+  } @else {
     <ion-chip @chipSkeletonTransition>
       <ion-skeleton-text animated="true"></ion-skeleton-text>
     </ion-chip>
-  </ng-template>
+  }
 </div>

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.scss

@@ -23,8 +23,7 @@
 
 .stack-children {
   display: grid;
-  align-items: start;
+  place-items: start start;
-  justify-items: start;
 }
 
 .stack-children > * {

frontend/app/src/app/modules/data/chips/edit-event-selection.html

@@ -22,7 +22,7 @@
     <ion-list-header> {{ 'data.chips.add_events.popover.ALL' | translate }} </ion-list-header>
   </ion-checkbox>
 </ion-item>
-<ng-container *ngFor="let frequency of selection.children">
+@for (frequency of selection.children; track frequency) {
   <ion-list inset="true" lines="full">
     <ion-item lines="none" class="list-header">
       <ion-checkbox
@@ -31,48 +31,55 @@
         (ionChange)="modified.emit(); frequency.click()"
       >
         <ion-list-header>
-          {{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
+          {{
-          durationLocalized: true | sentencecase) : ('data.chips.add_events.popover.SINGLE' | translate |
+            frequency.children[0].item.repeatFrequency
-          titlecase) }}
+              ? (frequency.children[0].item.repeatFrequency | durationLocalized: true | sentencecase)
+              : ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
+          }}
         </ion-list-header>
       </ion-checkbox>
     </ion-item>
-    <ion-item *ngFor="let date of frequency.children">
+    @for (date of frequency.children; track date) {
+      <ion-item>
         <ion-checkbox
           [checked]="date.selected"
           (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
         >
-        <ng-container *ngIf="date.item.dates.length > 1; else single_event">
+          @if (date.item.dates.length > 1) {
             <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} - {{ date.item.dates[0] | amAdd:
+              {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
-            date.item.duration | amDateFormat: 'LT' }}
+              {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
             </ion-text>
             <br />
             <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'LL' }} - {{ date.item.dates[date.item.dates.length - 1] |
+              {{ date.item.dates[0] | amDateFormat: 'LL' }} -
-            amDateFormat: 'LL' }}
+              {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'LL' }}
             </ion-text>
-        </ng-container>
+          } @else {
-        <ng-template #single_event>
+            @if (date.item.dates[0]; as time) {
-          <ion-text *ngIf="date.item.dates[0] as time; else noDates">
+              <ion-text>
-            {{ time | amDateFormat: 'LL, LT' }} - {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+                {{ time | amDateFormat: 'LL, LT' }} -
+                {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
               </ion-text>
-          <ng-template #noDates>
+            } @else {
               <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
               <br />
-            <ion-text *ngFor="let id of date.item.identifiers | keyvalue">
+              @for (id of date.item.identifiers | keyvalue; track id) {
-              {{ id.key }}: {{ id.value }}
+                <ion-text> {{ id.key }}: {{ id.value }} </ion-text>
-            </ion-text>
+              }
-          </ng-template>
+            }
-        </ng-template>
+          }
-        <ng-container class="ion-align-items-center" *ngIf="date.item.inPlace">
+          @if (date.item.inPlace) {
+            <ng-container class="ion-align-items-center">
               <br />
               <ion-text color="medium" class="place">
                 <ion-icon name="pin_drop"></ion-icon>
                 <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
               </ion-text>
             </ng-container>
+          }
         </ion-checkbox>
       </ion-item>
+    }
   </ion-list>
-</ng-container>
+}

frontend/app/src/app/modules/data/chips/filter/chip-filter.component.html

@@ -13,7 +13,11 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-chip *ngIf="displayValue" [class.active]="active" (click)="emitToggle(value)">
+@if (displayValue) {
-  <ion-icon class="ion-color" name="check_circle" [fill]="true" *ngIf="active"></ion-icon>
+  <ion-chip [class.active]="active" (click)="emitToggle(value)">
+    @if (active) {
+      <ion-icon class="ion-color" name="check_circle" [fill]="true"></ion-icon>
+    }
     <ion-label>{{ displayValue }}</ion-label>
   </ion-chip>
+}

frontend/app/src/app/modules/data/detail/data-detail-content.html

@@ -13,7 +13,8 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-header *ngIf="showModalHeader" translucent>
+@if (showModalHeader) {
+  <ion-header translucent>
     <ion-toolbar color="primary" mode="ios">
       <ion-title>{{ 'name' | thingTranslate: item }}</ion-title>
       <ion-buttons slot="end">
@@ -21,65 +22,69 @@
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
-
+}
-<stapps-title-card *ngIf="!showModalHeader" [item]="item"> </stapps-title-card>
+@if (!showModalHeader) {
+  <stapps-title-card [item]="item"> </stapps-title-card>
+}
 <ng-container *ngTemplateOutlet="contentTemplateRef || defaultContent; context: {$implicit: item}">
 </ng-container>
 <stapps-origin-detail [origin]="item.origin"></stapps-origin-detail>
 
 <ng-template #defaultContent>
-  <div [ngSwitch]="item.type" class="content-switch">
+  <div class="content-switch">
-    <stapps-article-detail-content
+    @switch (item.type) {
-      [item]="$any(item)"
+      @case ('article') {
-      *ngSwitchCase="'article'"
+        <stapps-article-detail-content [item]="$any(item)"></stapps-article-detail-content>
-    ></stapps-article-detail-content>
+      }
-    <stapps-catalog-detail-content
+      @case ('catalog') {
-      [item]="$any(item)"
+        <stapps-catalog-detail-content [item]="$any(item)"></stapps-catalog-detail-content>
-      *ngSwitchCase="'catalog'"
+      }
-    ></stapps-catalog-detail-content>
+      @case ('date series') {
-    <stapps-date-series-detail-content
+        <stapps-date-series-detail-content [item]="$any(item)"></stapps-date-series-detail-content>
-      [item]="$any(item)"
+      }
-      *ngSwitchCase="'date series'"
+      @case ('dish') {
-    ></stapps-date-series-detail-content>
+        <stapps-dish-detail-content [item]="$any(item)"></stapps-dish-detail-content>
-    <stapps-dish-detail-content [item]="$any(item)" *ngSwitchCase="'dish'"></stapps-dish-detail-content>
+      }
-    <stapps-event-detail-content
+      @case ('academic event') {
-      [item]="$any(item)"
+        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
-      *ngSwitchCase="'academic event'"
+      }
-    ></stapps-event-detail-content>
+      @case ('sport course') {
-    <stapps-event-detail-content
+        <stapps-event-detail-content [item]="$any(item)"></stapps-event-detail-content>
-      [item]="$any(item)"
+      }
-      *ngSwitchCase="'sport course'"
+      @case ('favorite') {
-    ></stapps-event-detail-content>
+        <stapps-favorite-detail-content [item]="$any(item)"></stapps-favorite-detail-content>
-    <stapps-favorite-detail-content
+      }
-      [item]="$any(item)"
+      @case ('message') {
-      *ngSwitchCase="'favorite'"
+        <stapps-message-detail-content [item]="$any(item)"></stapps-message-detail-content>
-    ></stapps-favorite-detail-content>
+      }
-    <stapps-message-detail-content
+      @case ('job posting') {
-      [item]="$any(item)"
+        <stapps-job-posting-detail-content [item]="$any(item)"></stapps-job-posting-detail-content>
-      *ngSwitchCase="'message'"
+      }
-    ></stapps-message-detail-content>
+      @case ('person') {
-    <stapps-job-posting-detail-content
+        <stapps-person-detail-content [item]="$any(item)"></stapps-person-detail-content>
-      [item]="$any(item)"
+      }
-      *ngSwitchCase="'job posting'"
+      @case ('building') {
-    ></stapps-job-posting-detail-content>
+        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
-    <stapps-person-detail-content [item]="$any(item)" *ngSwitchCase="'person'"></stapps-person-detail-content>
+      }
-    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'building'"></stapps-place-detail-content>
+      @case ('floor') {
-    <stapps-place-detail-content [item]="$any(item)" *ngSwitchCase="'floor'"></stapps-place-detail-content>
+        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
-    <stapps-place-detail-content
+      }
-      [item]="$any(item)"
+      @case ('point of interest') {
-      *ngSwitchCase="'point of interest'"
+        <stapps-place-detail-content [item]="$any(item)"></stapps-place-detail-content>
-    ></stapps-place-detail-content>
+      }
+      @case ('room') {
         <stapps-place-detail-content
           [item]="$any(item)"
           [openAsModal]="openAsModal"
-      *ngSwitchCase="'room'"
         ></stapps-place-detail-content>
-    <stapps-semester-detail-content
+      }
-      [item]="$any(item)"
+      @case ('semester') {
-      *ngSwitchCase="'semester'"
+        <stapps-semester-detail-content [item]="$any(item)"></stapps-semester-detail-content>
-    ></stapps-semester-detail-content>
+      }
-    <stapps-video-detail-content [item]="$any(item)" *ngSwitchCase="'video'"></stapps-video-detail-content>
+      @case ('video') {
-    <ng-container *ngSwitchDefault>
+        <stapps-video-detail-content [item]="$any(item)"></stapps-video-detail-content>
+      }
+      @default {
         <ion-item class="ion-text-wrap" lines="inset">
           <ion-thumbnail slot="start" class="ion-margin-end">
             <ion-icon [name]="item.type | dataIcon"></ion-icon>
@@ -95,11 +100,13 @@
             </ion-row>
           </ion-grid>
         </ion-item>
+        @if (item.description) {
           <stapps-simple-card
-        *ngIf="item.description"
             [title]="$any('description' | propertyNameTranslate: item) | titlecase"
             [content]="'description' | thingTranslate: item"
           ></stapps-simple-card>
-    </ng-container>
+        }
+      }
+    }
   </div>
 </ng-template>

frontend/app/src/app/modules/data/detail/data-detail-content.scss

@@ -41,8 +41,7 @@ stapps-origin-detail {
 
     width: 100%;
     height: fit-content;
-    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
+    margin-block: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1) var(--spacing-xl);
-    margin-block-end: var(--spacing-xl);
 
     background-color: var(--ion-card-background);
 

frontend/app/src/app/modules/data/detail/data-detail.html

@@ -13,28 +13,39 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-header *ngIf="defaultHeader">
+@if (defaultHeader) {
+  <ion-header>
     <ion-toolbar color="primary" mode="ios">
-    <ion-buttons slot="start" *ngIf="!isModal">
+      @if (!isModal) {
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
+      }
+      @if (item) {
         <ion-title
-      *ngIf="item"
           [style.opacity]="(collapse ? '1' : '0') + '!important'"
           [style.translate]="collapse ? '0' : '0 10px'"
           >{{ 'name' | thingTranslate: item }}</ion-title
         >
+      }
       <ion-buttons [slot]="isModal ? 'start' : 'primary'">
-      <stapps-share-button *ngIf="item" [title]="'name' | thingTranslate: item"></stapps-share-button>
+        @if (item) {
-      <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
+          <stapps-share-button [title]="'name' | thingTranslate: item"></stapps-share-button>
+        }
+        @if (item) {
+          <stapps-favorite-button [item]="$any(item)"></stapps-favorite-button>
+        }
       </ion-buttons>
-    <ion-buttons slot="end" *ngIf="isModal">
+      @if (isModal) {
+        <ion-buttons slot="end">
           <ion-button fill="clear" (click)="modalController.dismiss()">
             <ion-label>{{ 'modal.DISMISS' | translate }}</ion-label>
           </ion-button>
         </ion-buttons>
+      }
     </ion-toolbar>
   </ion-header>
+}
 <ng-content select="[header]"></ng-content>
 <ion-content
   parallax
@@ -42,31 +53,31 @@
   [scrollEvents]="true"
   (ionScroll)="collapse = $any($event).detail.scrollTop > 50"
 >
-  <ng-container [ngSwitch]="true">
+  @switch (true) {
-    <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
+    @case (!item && (isDisconnected | async)) {
       <div class="centered-message-container">
         <ion-icon name="signal_disconnected"></ion-icon>
         <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
       </div>
-    </ng-container>
+    }
-    <ng-container *ngSwitchCase="item === null">
+    @case (item === null) {
       <div class="centered-message-container">
         <ion-icon name="link_off"></ion-icon>
         <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
       </div>
-    </ng-container>
+    }
-    <ng-container *ngSwitchCase="!item && item !== null">
+    @case (!item && item !== null) {
       <stapps-skeleton-list-item></stapps-skeleton-list-item>
       <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
-    </ng-container>
+    }
-    <ng-container *ngSwitchDefault>
+    @default {
-      <ng-container *ngIf="item">
+      @if (item) {
         <stapps-data-path [item]="item" [autoRouting]="autoRouteDataPath"></stapps-data-path>
         <stapps-data-detail-content
           [item]="item"
           [contentTemplateRef]="contentTemplateRef"
         ></stapps-data-detail-content>
-      </ng-container>
+      }
-    </ng-container>
+    }
-  </ng-container>
+  }
 </ion-content>

frontend/app/src/app/modules/data/detail/data-path.html

@@ -13,7 +13,7 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="path | async as stack">
+@if (path | async; as stack) {
   <ion-breadcrumbs
     color="light"
     [itemsBeforeCollapse]="1"
@@ -21,7 +21,8 @@
     [maxItems]="maxItems"
     (ionCollapsedClick)="maxItems = undefined"
   >
-    <ion-breadcrumb *ngFor="let fragment of stack">
+    @for (fragment of stack; track fragment) {
+      <ion-breadcrumb>
         <ion-label
           (click)="dataRoutingService.emitPathEvent(fragment)"
           [style.max-width]="
@@ -37,5 +38,6 @@
           >{{ 'name' | thingTranslate: $any(fragment) }}</ion-label
         >
       </ion-breadcrumb>
+    }
   </ion-breadcrumbs>
-</ng-container>
+}

frontend/app/src/app/modules/data/elements/address-detail.html

@@ -29,18 +29,22 @@
         <ion-col>{{ 'data.detail.address.CITY' | translate | titlecase }}:</ion-col>
         <ion-col width-60 text-right> {{ address.addressLocality }} </ion-col>
       </ion-row>
-      <ion-row *ngIf="address.addressRegion">
+      @if (address.addressRegion) {
+        <ion-row>
           <ion-col>{{ 'data.detail.address.REGION' | translate | titlecase }}:</ion-col>
           <ion-col width-60 text-right> {{ address.addressRegion }} </ion-col>
         </ion-row>
+      }
       <ion-row>
         <ion-col>{{ 'data.detail.address.COUNTRY' | translate | titlecase }}:</ion-col>
         <ion-col width-60 text-right> {{ address.addressCountry }} </ion-col>
       </ion-row>
-      <ion-row *ngIf="address.postOfficeBoxNumber">
+      @if (address.postOfficeBoxNumber) {
+        <ion-row>
           <ion-col>{{ 'data.detail.address.POST_OFFICE_BOX' | translate | titlecase }}</ion-col>
           <ion-col width-60 text-right> {{ address.postOfficeBoxNumber }} </ion-col>
         </ion-row>
+      }
     </ion-grid>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/certifications-in-detail.html

@@ -16,7 +16,7 @@
   <ion-card-header>{{ 'data.types.certification.TITLE' | translate }}</ion-card-header>
   <ion-card-content>
     <div class="certification-list">
-      <ng-container *ngFor="let cert of certifications">
+      @for (cert of certifications; track cert) {
         <img
           (click)="popover.present($event)"
           [width]="72"
@@ -31,7 +31,7 @@
             </ion-content>
           </ng-template>
         </ion-popover>
-      </ng-container>
+      }
     </div>
     <ion-note>
       <stapps-external-link

frontend/app/src/app/modules/data/elements/long-inline-text.html

@@ -12,17 +12,23 @@
 ~ You should have received a copy of the GNU General Public License along with
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="text !== undefined">
+@if (text !== undefined) {
   <span class="ion-hide-sm-up">
     {{ text | slice: 0 : size }}
-    <span *ngIf="text.length > size" class="ion-hide-sm-up">…</span>
+    @if (text.length > size) {
+      <span class="ion-hide-sm-up">…</span>
+    }
   </span>
   <span class="ion-hide-sm-down ion-hide-md-up">
     {{ text | slice: 0 : size * 2 }}
-    <span *ngIf="text.length > size * 2" class="ion-hide-sm-down ion-hide-md-up"> … </span>
+    @if (text.length > size * 2) {
+      <span class="ion-hide-sm-down ion-hide-md-up"> … </span>
+    }
   </span>
   <span class="ion-hide-md-down">
     {{ text | slice: 0 : size * 3 }}
-    <span *ngIf="text.length > size * 3" class="ion-hide-md-down">…</span>
+    @if (text.length > size * 3) {
+      <span class="ion-hide-md-down">…</span>
+    }
   </span>
-</ng-container>
+}

frontend/app/src/app/modules/data/elements/offers-detail.html

@@ -16,36 +16,48 @@
 <ion-card>
   <ion-card-header>{{ 'data.detail.offers.TITLE' | translate | titlecase }}</ion-card-header>
   <ion-card-content>
-    <div *ngFor="let offer of offers">
+    @for (offer of offers; track offer) {
+      <div>
         <ion-grid>
           <ion-row>
-          <ion-col *ngIf="offer.inPlace">
+            @if (offer.inPlace) {
+              <ion-col>
                 <ion-icon name="pin_drop"></ion-icon>
                 <a [routerLink]="['/data-detail', offer.inPlace.uid]">
                   {{ 'name' | thingTranslate: offer.inPlace }}
                 </a>
               </ion-col>
-          <ion-col *ngIf="offer.availabilityRange">
+            }
-            <span
+            @if (offer.availabilityRange) {
-              *ngIf="offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte"
+              <ion-col>
-            >
+                @if (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) {
-              {{ (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) |
+                  <span>
-              amDateFormat : 'll' }}
+                    {{
+                      (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte)
+                        | amDateFormat: 'll'
+                    }}
                   </span>
+                }
               </ion-col>
+            }
           </ion-row>
         </ion-grid>
-      <ion-grid *ngIf="offer.prices && offer.availability !== 'out of stock'">
+        @if (offer.prices && offer.availability !== 'out of stock') {
-        <ion-row *ngFor="let group of $any(offer.prices) | keyvalue">
+          <ion-grid>
-          <ng-container *ngIf="group.key !== 'default'">
+            @for (group of $any(offer.prices) | keyvalue; track group) {
+              <ion-row>
+                @if (group.key !== 'default') {
                   <ion-col>{{ 'data.detail.offers.' + group.key | translate }} </ion-col>
                   <ion-col width-20 text-right>
                     <p>{{ $any(group.value) | currency: 'EUR' : 'symbol' : undefined : 'de' }}</p>
                   </ion-col>
-          </ng-container>
+                }
               </ion-row>
+            }
           </ion-grid>
-      <ion-grid *ngIf="offer.availability === 'out of stock'">
+        }
+        @if (offer.availability === 'out of stock') {
+          <ion-grid>
             <ion-row>
               <ion-col></ion-col>
               <ion-col width-20 text-right>
@@ -55,6 +67,8 @@
               </ion-col>
             </ion-row>
           </ion-grid>
+        }
       </div>
+    }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/offers-in-list.html

@@ -13,10 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (price) {
   <ion-badge
-  *ngIf="price"
+    [color]="
-  [color]="availability === 'out of stock' ? 'danger' : availability === 'limited availability' ? 'warning' : 'primary'"
+      availability === 'out of stock'
+        ? 'danger'
+        : availability === 'limited availability'
+          ? 'warning'
+          : 'primary'
+    "
   >
-  {{ availability === 'out of stock' ? ('data.detail.offers.sold_out' | translate) : (price | currency : 'EUR'
+    {{
-  : 'symbol' : undefined : 'de') }}
+      availability === 'out of stock'
+        ? ('data.detail.offers.sold_out' | translate)
+        : (price | currency: 'EUR' : 'symbol' : undefined : 'de')
+    }}
   </ion-badge>
+}

frontend/app/src/app/modules/data/elements/offers-in-list.scss

@@ -3,9 +3,12 @@
 }
 
 ion-badge {
-  display: inline-block;
-  font-size: 0.8em;
-  margin-top: -0.25em;
   translate: 0 0.25em;
+
+  display: inline-block;
+
+  margin-top: -0.25em;
   padding: 0.25em;
+
+  font-size: 0.8em;
 }

frontend/app/src/app/modules/data/elements/origin-detail.html

@@ -13,53 +13,72 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-card *ngIf="origin.type === 'user'">
+@if (origin.type === 'user') {
+  <ion-card>
     <ion-card-header
-    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.USER' | translate |
+      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-    titlecase }}</ion-card-header
+      {{ 'data.types.origin.USER' | translate | titlecase }}</ion-card-header
     >
     <ion-card-content>
       <p>
-      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | amDateFormat :
+        {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}:
-      'll' }}
+        {{ origin.created | amDateFormat: 'll' }}
       </p>
-    <p *ngIf="origin.updated">
+      @if (origin.updated) {
-      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | amDateFormat :
+        <p>
-      'll' }}
+          {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}:
+          {{ origin.updated | amDateFormat: 'll' }}
         </p>
-    <p *ngIf="origin.modified">
+      }
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+      @if (origin.modified) {
-      'll' }}
+        <p>
+          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+          {{ origin.modified | amDateFormat: 'll' }}
         </p>
-    <p *ngIf="origin.maintainer">
+      }
+      @if (origin.maintainer) {
+        <p>
           {{ 'data.types.origin.detail.MAINTAINER' | translate }}:
           <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
         </p>
+      }
     </ion-card-content>
   </ion-card>
-
+}
-<ion-card *ngIf="origin.type === 'remote'">
+@if (origin.type === 'remote') {
+  <ion-card>
     <ion-card-header
-    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.REMOTE' | translate |
+      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-    titlecase }}</ion-card-header
+      {{ 'data.types.origin.REMOTE' | translate | titlecase }}</ion-card-header
     >
     <ion-card-content>
       <p>
-      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | amDateFormat :
+        {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}:
-      'll' }}
+        {{ origin.indexed | amDateFormat: 'll' }}
       </p>
-    <p *ngIf="origin.modified">
+      @if (origin.modified) {
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+        <p>
-      'll' }}
+          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
+          {{ origin.modified | amDateFormat: 'll' }}
         </p>
-    <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
+      }
-    <p *ngIf="origin.maintainer">
+      @if (origin.name) {
+        <p>{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
+      }
+      @if (origin.maintainer) {
+        <p>
           {{ 'data.types.origin.detail.MAINTAINER' | translate | titlecase }}:
           <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
         </p>
-    <p *ngIf="origin.responsibleEntity">
+      }
+      @if (origin.responsibleEntity) {
+        <p>
           {{ 'data.types.origin.detail.RESPONSIBLE' | translate | titlecase }}:
-      <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{ origin.responsibleEntity.name }}</a>
+          <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{
+            origin.responsibleEntity.name
+          }}</a>
         </p>
+      }
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/elements/origin-in-list.html

@@ -1,7 +1,10 @@
-<div *ngIf="origin.type === 'user'">
+@if (origin.type === 'user') {
+  <div>
     <p>{{ origin.created | dateFormat }}</p>
   </div>
-
+}
-<div *ngIf="origin.type === 'remote'">
+@if (origin.type === 'remote') {
+  <div>
     <p>{{ origin.indexed | dateFormat }}</p>
   </div>
+}

frontend/app/src/app/modules/data/elements/rating.html

@@ -13,28 +13,27 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (canBeRated | async) {
   <ion-button
-  *ngIf="canBeRated | async"
     fill="clear"
     (click)="$event.stopPropagation(); performRating.next(true)"
     [disabled]="wasAlreadyRated | async"
   >
     <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
   </ion-button>
-
+}
-<div
+@if ((performRating | async) && (wasAlreadyRated | async) !== true) {
-  class="rating-stars"
+  <div class="rating-stars" [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'">
-  *ngIf="(performRating | async) && (wasAlreadyRated | async) !== true"
+    @for (i of [5, 4, 3, 2, 1]; track i) {
-  [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'"
->
       <ion-icon
         [class.rated-value]="(userRating | async) === i"
-    *ngFor="let i of [5, 4, 3, 2, 1]"
         (click)="$event.stopPropagation(); userRating.next(i)"
         slot="icon-only"
         [size]="32"
         color="medium"
         name="grade"
       ></ion-icon>
+    }
     <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>
   </div>
+}

frontend/app/src/app/modules/data/elements/simple-card.html

@@ -16,23 +16,24 @@
 <ion-card>
   <ion-card-header>{{ title }}</ion-card-header>
   <ion-card-content>
-    <ng-container *ngIf="isString(content); else list">
+    @if (isString(content)) {
-      <ng-container *ngIf="isMarkdown; else plainText">
+      @if (isMarkdown) {
         <markdown [data]="content"></markdown>
-      </ng-container>
+      } @else {
-      <ng-template #plainText>
         <p>{{ content }}</p>
-      </ng-template>
+      }
-    </ng-container>
+    } @else {
-    <ng-template #list>
+      @if (content && isThing(content[0])) {
-      <ng-container *ngIf="content && isThing(content[0]); else textList">
+        @for (thing of $any(content); track thing) {
-        <a [routerLink]="['/data-detail', thing.uid]" *ngFor="let thing of $any(content)">
+          <a [routerLink]="['/data-detail', thing.uid]">
             <p>{{ 'name' | thingTranslate: thing }}</p>
           </a>
-      </ng-container>
+        }
-      <ng-template #textList>
+      } @else {
-        <p *ngFor="let text of $any(content)">{{ text }}</p>
+        @for (text of $any(content); track text) {
-      </ng-template>
+          <p>{{ text }}</p>
-    </ng-template>
+        }
+      }
+    }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/skeleton-list-item.html

@@ -1,7 +1,9 @@
 <ion-item>
-  <ion-thumbnail *ngIf="!hideThumbnail" slot="start" class="ion-margin-end">
+  @if (!hideThumbnail) {
+    <ion-thumbnail slot="start" class="ion-margin-end">
       <ion-skeleton-text animated></ion-skeleton-text>
     </ion-thumbnail>
+  }
   <ion-grid>
     <ion-row>
       <ion-col>

frontend/app/src/app/modules/data/elements/skeleton-simple-card.html

@@ -1,14 +1,14 @@
 <ion-card>
-  <ion-card-header *ngIf="title">
+  @if (title) {
+    <ion-card-header>
       <ion-skeleton-text animated style="width: 15%"></ion-skeleton-text>
     </ion-card-header>
+  }
   <ion-card-content>
     <p>
-      <ion-skeleton-text
+      @for (line of [].constructor(lines); track line) {
-        *ngFor="let line of [].constructor(lines)"
+        <ion-skeleton-text animated style="width: 85%"></ion-skeleton-text>
-        animated
+      }
-        style="width: 85%"
-      ></ion-skeleton-text>
     </p>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.html

@@ -16,34 +16,35 @@
   <ion-card-header>
     <ion-card-title>
       <h1>
-        <ng-container *ngIf="$any(item).honorificPrefix">{{
+        @if ($any(item).honorificPrefix) {
-          'honorificPrefix' | thingTranslate: item
+          {{ 'honorificPrefix' | thingTranslate: item }}
-        }}</ng-container>
+        }
         {{ 'name' | thingTranslate: item }}
-        <ng-container *ngIf="$any(item).honorificSuffix">{{
+        @if ($any(item).honorificSuffix) {
-          'honorificSuffix' | thingTranslate: item
+          {{ 'honorificSuffix' | thingTranslate: item }}
-        }}</ng-container>
+        }
       </h1>
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    <div *ngIf="$any(item).openingHours as openingHours" class="opening-hours">
+    @if ($any(item).openingHours; as openingHours) {
+      <div class="opening-hours">
         <stapps-opening-hours [openingHours]="openingHours"></stapps-opening-hours>
       </div>
+    }
     <!-- TODO obviously this is bad style. Tbd where to put the differentiation. Job Postings always have a description, but it's going to be shown in `stapps-job-posting-detail-content` anyways, no need to repeat here. For this view, I would use other fields of the schema.org JobPosting like the `ThingWithCategory.category` -->
-    <div *ngIf="item.description && item.type !== 'job posting'" class="description">
+    @if (item.description && item.type !== 'job posting') {
+      <div class="description">
         <div class="text-accordion" [style.-webkit-line-clamp]="descriptionLinesToDisplay" #accordionTextArea>
           {{ 'description' | thingTranslate: item }}
         </div>
       </div>
+    }
     <!-- TODO see above -->
-    <ion-button
+    @if (item.description && item.type !== 'job posting' && buttonShown) {
-      expand="full"
+      <ion-button expand="full" fill="clear" (click)="toggleDescriptionAccordion()">
-      fill="clear"
-      *ngIf="item.description && item.type !== 'job posting' && buttonShown"
-      (click)="toggleDescriptionAccordion()"
-    >
         <ion-icon [name]="buttonState" size="large"></ion-icon>
       </ion-button>
+    }
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/data/elements/title-card.component.scss

@@ -16,9 +16,8 @@
 .text-accordion {
   overflow: hidden;
   display: -webkit-box;
-  text-overflow: ellipsis;
-
   -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
 }
 
 ion-card {

frontend/app/src/app/modules/data/list/data-list-item-host-default.html

@@ -14,9 +14,11 @@
 -->
 
 <h2>{{ 'name' | thingTranslate: item }}</h2>
-<p *ngIf="item.description">
+@if (item.description) {
+  <p>
     <stapps-long-inline-text
       [text]="'description' | thingTranslate: item"
       [size]="80"
     ></stapps-long-inline-text>
   </p>
+}

frontend/app/src/app/modules/data/list/data-list-item.html

@@ -20,25 +20,29 @@
   detail="false"
   (click)="notifySelect()"
 >
-  <ion-thumbnail slot="start" *ngIf="!hideThumbnail" class="ion-margin-end">
+  @if (!hideThumbnail) {
+    <ion-thumbnail slot="start" class="ion-margin-end">
       <ion-icon color="dark" [name]="item.type | dataIcon" [size]="36"></ion-icon>
     </ion-thumbnail>
-  <ng-container *ngIf="contentTemplateRef; else defaultContent">
+  }
+  @if (contentTemplateRef) {
     <ng-container *ngTemplateOutlet="contentTemplateRef; context: {$implicit: item}"></ng-container>
-  </ng-container>
+  } @else {
-
-  <ng-container *ngIf="listItemEndInteraction" [ngSwitch]="item.type">
-    <stapps-rating slot="end" *ngSwitchCase="'dish'" [item]="$any(item)"></stapps-rating>
-    <stapps-favorite-button slot="end" *ngSwitchDefault [item]="$any(item)"></stapps-favorite-button>
-  </ng-container>
-</ion-item>
-
-<ng-template #defaultContent>
     <div>
       <ng-template [dataListItemHost]="item"></ng-template>
-    <stapps-action-chip-list
+      @if (listItemChipInteraction && appearance !== 'square') {
-      *ngIf="listItemChipInteraction && appearance !== 'square'"
+        <stapps-action-chip-list [item]="item"></stapps-action-chip-list>
-      [item]="item"
+      }
-    ></stapps-action-chip-list>
     </div>
-</ng-template>
+  }
+  @if (listItemEndInteraction) {
+    @switch (item.type) {
+      @case ('dish') {
+        <stapps-rating slot="end" [item]="$any(item)"></stapps-rating>
+      }
+      @default {
+        <stapps-favorite-button slot="end" [item]="$any(item)"></stapps-favorite-button>
+      }
+    }
+  }
+</ion-item>

frontend/app/src/app/modules/data/list/data-list-item.scss

@@ -29,29 +29,29 @@ ion-item {
   @include border-radius-in-parallax(var(--border-radius-default));
 
   overflow: hidden;
-  margin: var(--spacing-sm);
   height: 100%;
+  margin: var(--spacing-sm);
 
   ion-thumbnail {
     --ion-margin: var(--spacing-xs);
 
-    margin-inline: var(--spacing-md);
     margin-block: auto;
+    margin-inline: var(--spacing-md);
     padding: 0;
   }
 }
 
 .ion-text-wrap ::ng-deep ion-label {
   display: -webkit-box;
+  -webkit-box-orient: vertical;
   white-space: normal !important;
 
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
 
 [slot='end'] {
-  margin-inline-start: 0;
   margin-block: auto;
+  margin-inline-start: 0;
 }
 
 stapps-action-chip-list {
@@ -63,30 +63,30 @@ ion-item ::ng-deep {
   .title {
     overflow: hidden;
     display: -webkit-box;
+    -webkit-box-orient: vertical;
 
     white-space: break-spaces;
 
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
 
   .title-sub {
     overflow: hidden;
     display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    margin-block: var(--spacing-xs);
 
     white-space: break-spaces;
 
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
-
-    margin-block: var(--spacing-xs);
   }
 }
 
 :host.square ::ng-deep {
   ion-item {
-    margin: 0;
     align-items: flex-start;
+    margin: 0;
   }
 
   ion-row {

frontend/app/src/app/modules/data/list/data-list.html

@@ -13,19 +13,19 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="itemStream | async as items">
+@if (itemStream | async; as items) {
   <ng-content select="[header]"></ng-content>
   <ion-list [style.display]="items && items.length ? 'block' : 'none'">
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track item) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
-    </ng-container>
+    }
     <ion-infinite-scroll (ionInfinite)="notifyLoadMore()">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </ion-list>
-</ng-container>
+}
 <div [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'">
   <ion-label class="centered-message-container">
     {{ 'search.nothing_found' | translate | titlecase }}

frontend/app/src/app/modules/data/list/search-page-switch-animation.ts

@@ -15,7 +15,7 @@
 
 import type {AnimationBuilder} from '@ionic/angular';
 import {AnimationController} from '@ionic/angular';
-import type {AnimationOptions} from '@ionic/angular/providers/nav-controller';
+import type {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
 
 /**
  *

frontend/app/src/app/modules/data/list/search-page.html

@@ -15,12 +15,14 @@
 
 <stapps-context contentId="data-list"></stapps-context>
 <ion-header>
-  <ion-toolbar color="primary" mode="ios" *ngIf="showDrawer && showTopToolbar">
+  @if (showDrawer && showTopToolbar) {
+    <ion-toolbar color="primary" mode="ios">
       <ion-buttons slot="start">
         <ion-back-button [defaultHref]="backUrl"></ion-back-button>
       </ion-buttons>
       <ion-title>{{ title | translate }}</ion-title>
     </ion-toolbar>
+  }
   <ion-toolbar color="primary">
     <ion-searchbar
       (ngModelChange)="searchStringChanged($event)"
@@ -40,7 +42,8 @@
       </ion-menu-button>
     </ion-searchbar>
   </ion-toolbar>
-  <ion-toolbar color="primary" class="category-tab" *ngIf="showNavigation && isHebisAvailable">
+  @if (showNavigation && isHebisAvailable) {
+    <ion-toolbar color="primary" class="category-tab">
       <ion-buttons class="ion-justify-content-between">
         <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
         <ion-button
@@ -53,6 +56,7 @@
         </ion-button>
       </ion-buttons>
     </ion-toolbar>
+  }
 </ion-header>
 
 <ion-content class="content">

frontend/app/src/app/modules/data/list/simple-data-list.html

@@ -13,35 +13,32 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="items | async as items; else loading">
+@if (items | async; as items) {
   <ion-list>
-    <ng-container *ngIf="!listHeader; else header"></ng-container>
+    @if (!listHeader) {
-    <ng-container *ngFor="let item of items">
+    } @else {
-      <ng-container
-        *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
-      ></ng-container>
-    </ng-container>
-  </ion-list>
-  <ion-label class="empty-list-message" *ngIf="emptyListMessage && items.length === 0"
-    >{{ emptyListMessage }}</ion-label
-  >
-</ng-container>
-<ng-template #loading>
-  <ion-list>
-    <stapps-skeleton-list-item
-      [hideThumbnail]="singleType"
-      *ngFor="let skeleton of [].constructor(skeletonItems)"
-    >
-    </stapps-skeleton-list-item>
-  </ion-list>
-</ng-template>
-<ng-template #header>
       <ion-list-header lines="inset">
         <ion-text color="dark">
           <h3>{{ listHeader }}</h3>
         </ion-text>
       </ion-list-header>
-</ng-template>
+    }
+    @for (item of items; track item) {
+      <ng-container
+        *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
+      ></ng-container>
+    }
+  </ion-list>
+  @if (emptyListMessage && items.length === 0) {
+    <ion-label class="empty-list-message">{{ emptyListMessage }}</ion-label>
+  }
+} @else {
+  <ion-list>
+    @for (skeleton of [].constructor(skeletonItems); track skeleton) {
+      <stapps-skeleton-list-item [hideThumbnail]="singleType"> </stapps-skeleton-list-item>
+    }
+  </ion-list>
+}
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>
 </ng-template>

frontend/app/src/app/modules/data/list/tree-list-fragment.html

@@ -13,19 +13,25 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-accordion-group *ngIf="entries as entries" [readonly]="true" [value]="entries" [multiple]="true">
+@if (entries; as entries) {
-  <ion-accordion *ngFor="let entry of entries" [value]="entry">
+  <ion-accordion-group [readonly]="true" [value]="entries" [multiple]="true">
-    <div *ngIf="groupMap[entry[0]] as header" slot="header" class="tree-indicator">
+    @for (entry of entries; track entry) {
+      <ion-accordion [value]="entry">
+        @if (groupMap[entry[0]]; as header) {
+          <div slot="header" class="tree-indicator">
             <ng-container
               *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: header}"
             ></ng-container>
           </div>
+        }
         <ion-list slot="content" lines="none">
-      <div *ngFor="let item of entry[1]._ || []" class="tree-indicator">
+          @for (item of entry[1]._ || []; track item) {
+            <div class="tree-indicator">
               <ng-container
                 *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
               ></ng-container>
             </div>
+          }
           <tree-list-fragment
             [groupMap]="groupMap"
             [items]="entry[1]"
@@ -34,7 +40,9 @@
           ></tree-list-fragment>
         </ion-list>
       </ion-accordion>
+    }
   </ion-accordion-group>
+}
 
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>

frontend/app/src/app/modules/data/list/tree-list.html

@@ -13,10 +13,11 @@
 ~  this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (_groups | async; as groups) {
   <tree-list-fragment
-  *ngIf="_groups | async as groups"
     [items]="groups"
     [groupMap]="_groupItems!"
     [singleType]="singleType"
     [listItemTemplateRef]="listItemTemplateRef"
   ></tree-list-fragment>
+}

frontend/app/src/app/modules/data/types/article/article-detail-content.html

@@ -13,75 +13,87 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-card *ngIf="item.sameAs">
+@if (item.sameAs) {
+  <ion-card>
     <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <stapps-external-link [text]="'name' | thingTranslate : item" [link]="item.sameAs"></stapps-external-link>
+      <stapps-external-link
+        [text]="'name' | thingTranslate: item"
+        [link]="item.sameAs"
+      ></stapps-external-link>
     </ion-card-content>
   </ion-card>
-
+}
+@if (!item.sameAs) {
   <stapps-simple-card
-  *ngIf="!item.sameAs"
     [title]="'name' | propertyNameTranslate: item | sentencecase"
     [content]="'name' | thingTranslate: item"
   >
   </stapps-simple-card>
-
+}
+@if (item.description) {
   <stapps-simple-card
-  *ngIf="item.description"
     [title]="'hebisSearch.detail.description' | translate | sentencecase"
     [content]="item.description"
   ></stapps-simple-card>
-
+}
+@if (item.sourceOrganization) {
   <stapps-simple-card
-  *ngIf="item.sourceOrganization"
     [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
     [content]="item.sourceOrganization"
   ></stapps-simple-card>
-
+}
-<ion-card *ngIf="item.authors && item.authors.length > 0">
+@if (item.authors && item.authors.length > 0) {
+  <ion-card>
     <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate : author }}</ion-label>
+      @for (author of item.authors; track author) {
+        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+      }
     </ion-card-content>
   </ion-card>
-
+}
+@if (item.firstPublished && !item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && !item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="item.firstPublished"
   >
   </stapps-simple-card>
-
+}
+@if (item.firstPublished && item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
   >
   </stapps-simple-card>
-
+}
-<ion-card *ngIf="item.publications">
+@if (item.publications) {
+  <ion-card>
     <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <p *ngFor="let publication of item.publications">
+      @for (publication of item.publications; track publication) {
-      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+        <p>
-      }} {{ publication.publisher }}
+          {{ publication.locations | join: ', ' }}
+          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
         </p>
+      }
     </ion-card-content>
   </ion-card>
-
+}
+@if (item.reference) {
   <stapps-simple-card
-  *ngIf="item.reference"
     [title]="'reference' | propertyNameTranslate: item | sentencecase"
     [content]="item.reference"
   ></stapps-simple-card>
-
+}
+@if (item.isPartOf) {
   <stapps-simple-card
-  *ngIf="item.isPartOf"
     [title]="'isPartOf' | propertyNameTranslate: item | sentencecase"
     [content]="item.isPartOf.name"
   ></stapps-simple-card>
-<ion-card *ngIf="item.categories">
+}
+@if (item.categories) {
+  <ion-card>
     <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
       <ion-chip [color]="'primary'">
@@ -90,3 +102,4 @@
       </ion-chip>
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/types/article/article-list-item.html

@@ -18,16 +18,19 @@
     <ion-col>
       <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
       <p>
-        <ng-container *ngFor="let author of item.authors">
+        @for (author of item.authors; track author) {
-          {{ 'name' | thingTranslate : author }}</ng-container
+          {{ 'name' | thingTranslate: author }}
-        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
+        }
-        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+        @if (item.authors && item.authors && item.firstPublished) {
-          >{{ item.firstPublished }}</ng-container
+          ,&nbsp;
-        ><ng-template #dateRange
+        }
-          ><ng-container *ngIf="item.firstPublished && item.lastPublished"
+        @if (item.firstPublished && !item.lastPublished) {
-            >{{ [item.firstPublished, item.lastPublished] | join : ' - ' }}</ng-container
+          {{ item.firstPublished }}
-          ></ng-template
+        } @else {
-        >
+          @if (item.firstPublished && item.lastPublished) {
+            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+          }
+        }
       </p>
       <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
     </ion-col>

frontend/app/src/app/modules/data/types/book/book-detail-content.html

@@ -13,74 +13,86 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-card *ngIf="item.sameAs">
+@if (item.sameAs) {
+  <ion-card>
     <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <stapps-external-link [text]="'name' | thingTranslate : item" [link]="item.sameAs"></stapps-external-link>
+      <stapps-external-link
+        [text]="'name' | thingTranslate: item"
+        [link]="item.sameAs"
+      ></stapps-external-link>
     </ion-card-content>
   </ion-card>
-
+}
+@if (!item.sameAs) {
   <stapps-simple-card
-  *ngIf="!item.sameAs"
     [title]="'name' | propertyNameTranslate: item | sentencecase"
     [content]="'name' | thingTranslate: item"
   >
   </stapps-simple-card>
-
+}
+@if (item.edition) {
   <stapps-simple-card
-  *ngIf="item.edition"
     [title]="'edition' | propertyNameTranslate: item | sentencecase"
     [content]="'edition' | thingTranslate: item"
   >
   </stapps-simple-card>
-
+}
+@if (item.description) {
   <stapps-simple-card
-  *ngIf="item.description"
     [title]="'hebisSearch.detail.description' | translate | sentencecase"
     [content]="item.description"
   ></stapps-simple-card>
-
+}
+@if (item.sourceOrganization) {
   <stapps-simple-card
-  *ngIf="item.sourceOrganization"
     [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
     [content]="item.sourceOrganization"
   ></stapps-simple-card>
-
+}
-<ion-card *ngIf="item.authors && item.authors.length > 0">
+@if (item.authors && item.authors.length > 0) {
+  <ion-card>
     <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate : author }}</ion-label>
+      @for (author of item.authors; track author) {
+        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+      }
     </ion-card-content>
   </ion-card>
-
+}
-<stapps-simple-card
+@if (item.ISBNs) {
-  *ngIf="item.ISBNs"
+  <stapps-simple-card [title]="'ISBNs' | propertyNameTranslate: item | sentencecase" [content]="item.ISBNs">
-  [title]="'ISBNs' | propertyNameTranslate : item | sentencecase"
-  [content]="item.ISBNs"
->
   </stapps-simple-card>
+}
+@if (item.firstPublished && !item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && !item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="item.firstPublished"
   >
   </stapps-simple-card>
+}
+@if (item.firstPublished && item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
   >
   </stapps-simple-card>
-<ion-card *ngIf="item.publications">
+}
+@if (item.publications) {
+  <ion-card>
     <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <p *ngFor="let publication of item.publications">
+      @for (publication of item.publications; track publication) {
-      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+        <p>
-      }} {{ publication.publisher }}
+          {{ publication.locations | join: ', ' }}
+          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
         </p>
+      }
     </ion-card-content>
   </ion-card>
-<ion-card *ngIf="item.categories">
+}
+@if (item.categories) {
+  <ion-card>
     <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
       <ion-chip [color]="'primary'">
@@ -89,3 +101,4 @@
       </ion-chip>
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/types/book/book-list-item.html

@@ -18,16 +18,19 @@
     <ion-col>
       <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
       <p>
-        <ng-container *ngFor="let author of item.authors">
+        @for (author of item.authors; track author) {
-          {{ 'name' | thingTranslate : author }}</ng-container
+          {{ 'name' | thingTranslate: author }}
-        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
+        }
-        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+        @if (item.authors && item.authors && item.firstPublished) {
-          >{{ item.firstPublished }}</ng-container
+          ,&nbsp;
-        ><ng-template #dateRange
+        }
-          ><ng-container *ngIf="item.firstPublished && item.lastPublished"
+        @if (item.firstPublished && !item.lastPublished) {
-            >{{ [item.firstPublished, item.lastPublished] | join : ' - ' }}</ng-container
+          {{ item.firstPublished }}
-          ></ng-template
+        } @else {
-        >
+          @if (item.firstPublished && item.lastPublished) {
+            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+          }
+        }
       </p>
       <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
     </ion-col>

frontend/app/src/app/modules/data/types/catalog/catalog-list-item.html

@@ -3,7 +3,9 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title"> {{ 'name' | thingTranslate: item }} </ion-label>
-        <p *ngIf="item.academicTerm" class="title-sub">{{ item.academicTerm.name }}</p>
+        @if (item.academicTerm) {
+          <p class="title-sub">{{ item.academicTerm.name }}</p>
+        }
       </div>
     </ion-col>
   </ion-row>

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -12,24 +12,23 @@
 ~ You should have received a copy of the GNU General Public License along with
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="isInCalendar | async; else add">
+@if (isInCalendar | async) {
   <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
     <ion-icon name="event_available" [fill]="true"></ion-icon>
     <ion-label>{{ 'chips.addEvent.addedToEvents' | translate }}</ion-label>
   </ion-chip>
-</ng-container>
+} @else {
-<ng-template #add>
   <ion-chip outline="true" color="primary" (click)="addToCalendar()">
     <ion-icon name="calendar_today"></ion-icon>
     <ion-label>{{ 'chips.addEvent.addEvent' | translate }}</ion-label>
   </ion-chip>
-</ng-template>
+}
 <stapps-simple-card
   title="{{ 'duration' | propertyNameTranslate: item | titlecase }}"
   [content]="[item.duration | amDuration: 'minutes']"
 ></stapps-simple-card>
+@if (item.dates.length > 1) {
   <stapps-simple-card
-  *ngIf="item.dates.length > 1; else single_event"
     title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
     content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
       item.dates[0] | amDateFormat: 'HH:mm ddd'
@@ -37,30 +36,37 @@
       item.dates[item.dates.length - 1] | amDateFormat: 'll'
     }}"
   ></stapps-simple-card>
-<ng-template #single_event>
+} @else {
   <stapps-simple-card
     title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
     content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
       item.dates[item.dates.length - 1] | amDateFormat: 'll, HH:mm'
     }}"
   ></stapps-simple-card>
-</ng-template>
+}
+@if (item.performers) {
   <stapps-simple-card
-  *ngIf="item.performers"
     [title]="'performers' | propertyNameTranslate: item | titlecase"
     [content]="item.performers"
   ></stapps-simple-card>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+}
+@if (item.offers) {
+  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
+}
 <ion-card>
   <ion-card-header> {{ 'event' | propertyNameTranslate: item | titlecase }} </ion-card-header>
   <ion-card-content>
     <stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
   </ion-card-content>
 </ion-card>
-<ion-card *ngIf="item.inPlace">
+@if (item.inPlace) {
+  <ion-card>
     <ion-card-header> {{ 'inPlace' | propertyNameTranslate: item | titlecase }} </ion-card-header>
     <ion-card-content>
       <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
     </ion-card-content>
   </ion-card>
-<stapps-map-widget *ngIf="item.inPlace && item.inPlace.geo" [place]="item.inPlace"></stapps-map-widget>
+}
+@if (item.inPlace && item.inPlace.geo) {
+  <stapps-map-widget [place]="item.inPlace"></stapps-map-widget>
+}

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -20,23 +20,29 @@
         <ion-label class="title">{{ 'event.name' | thingTranslate: item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
-          <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
+          @if (item.dates[0] && item.dates[item.dates.length - 1]) {
-            <span *ngIf="item.repeatFrequency">
+            <span>
-              {{ item.repeatFrequency | durationLocalized : true | sentencecase }}, {{ item.dates[0] |
+              @if (item.repeatFrequency) {
-              dateFormat : 'weekday:long' }}
+                <span>
+                  {{ item.repeatFrequency | durationLocalized: true | sentencecase }},
+                  {{ item.dates[0] | dateFormat: 'weekday:long' }}
                 </span>
+              }
               <span>
                 ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
               </span>
             </span>
+          }
         </p>
-        <ion-note *ngIf="item.event.type === 'academic event'"
+        @if (item.event.type === 'academic event') {
-          >{{ 'categories' | thingTranslate : item.event | join : ', ' }}</ion-note
+          <ion-note>{{ 'categories' | thingTranslate: item.event | join: ', ' }}</ion-note>
-        >
+        }
       </div>
     </ion-col>
     <ion-col width-20 text-right>
-      <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
+      @if (item.offers) {
+        <stapps-offers-in-list [offers]="item.offers"></stapps-offers-in-list>
+      }
     </ion-col>
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/data/types/dish/dish-characteristics.html

@@ -14,25 +14,27 @@
 -->
 <ion-note>
   <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
-  <ng-container *ngIf="item.characteristics">
+  @if (item.characteristics) {
-    <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
+    @for (characteristic of 'characteristics' | thingTranslate: item; track characteristic) {
       <!-- Abbr tag shows the actual name on hover -->
       <abbr
         [style.--background-url]="'url(' + characteristic.image + ')'"
         [title]="characteristic.name | titlecase"
         class="mask-image"
       ></abbr>
-    </ng-container>
+    }
-  </ng-container>
+  }
-  <ng-container *ngIf="item.certifications">
+  @if (item.certifications) {
-    <ng-container *ngFor="let cert of item.certifications">
+    @for (cert of item.certifications; track cert) {
-      <abbr *ngIf="cert.compactImage" [title]="'description' | thingTranslate: cert">
+      @if (cert.compactImage) {
+        <abbr [title]="'description' | thingTranslate: cert">
           <img
             [src]="'compactImage' | thingTranslate: cert"
             height="16"
             [alt]="'name' | thingTranslate: cert"
           />
         </abbr>
-    </ng-container>
+      }
-  </ng-container>
+    }
+  }
 </ion-note>

frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss

@@ -19,14 +19,15 @@
 $size: 16px;
 
 ion-note {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--spacing-xs) var(--spacing-sm);
+  align-items: flex-start;
+  justify-content: flex-start;
+
   margin: inherit;
   margin-right: inherit;
   margin-block-end: inherit;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--spacing-xs) var(--spacing-sm);
-  flex-flow: row wrap;
 
   list-style: none;
 }

frontend/app/src/app/modules/data/types/dish/dish-detail-content.html

@@ -14,11 +14,12 @@
 -->
 
 <stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+@if (item.offers) {
-<stapps-certifications-in-detail
+  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
-  *ngIf="item.certifications"
+}
-  [certifications]="item.certifications"
+@if (item.certifications) {
-></stapps-certifications-in-detail>
+  <stapps-certifications-in-detail [certifications]="item.certifications"></stapps-certifications-in-detail>
+}
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
   <ion-card-header>{{
@@ -70,11 +71,12 @@
         </ion-card-content>
       </ion-card>
       -->
+@if (item.additives) {
   <stapps-simple-card
-  *ngIf="item.additives"
     [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
     [content]="'additives' | thingTranslate: item | join: ', '"
   >
   </stapps-simple-card>
+}
 
 <stapps-rating [item]="item"></stapps-rating>

frontend/app/src/app/modules/data/types/dish/dish-list-item.html

@@ -14,10 +14,9 @@
 -->
 
 <ion-label class="title">
-  <stapps-offers-in-list
+  @if (item.offers && item.offers.length > 0) {
-    *ngIf="item.offers && item.offers.length > 0"
+    <stapps-offers-in-list [offers]="item.offers"></stapps-offers-in-list>
-    [offers]="item.offers"
+  }
-  ></stapps-offers-in-list>
   {{ 'name' | thingTranslate: item }}
 </ion-label>
 <p class="title-sub">{{ 'description' | thingTranslate: item | sentencecase }}</p>

frontend/app/src/app/modules/data/types/event/event-detail-content.html

@@ -13,38 +13,42 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (item.type === 'academic event' && item.categories) {
   <stapps-simple-card
-  *ngIf="item.type === 'academic event' && item.categories"
     [title]="'categories' | propertyNameTranslate: item | titlecase"
     [content]="'categories' | thingTranslate: item"
   >
   </stapps-simple-card>
-
+}
-<stapps-add-event-action-chip *ngIf="item.type === 'academic event'" [item]="item">
+@if (item.type === 'academic event') {
-</stapps-add-event-action-chip>
+  <stapps-add-event-action-chip [item]="item"> </stapps-add-event-action-chip>
-
+}
+@if (item.performers) {
   <stapps-simple-card
-  *ngIf="item.performers"
     [title]="'performers' | propertyNameTranslate: item | titlecase"
     [content]="item.performers"
   ></stapps-simple-card>
+}
+@if (item.organizers) {
   <stapps-simple-card
-  *ngIf="item.organizers"
     [title]="'organizers' | propertyNameTranslate: item | titlecase"
     [content]="item.organizers"
   ></stapps-simple-card>
-<ng-container *ngIf="item.type === 'academic event'">
+}
+@if (item.type === 'academic event') {
+  @if (item.majors) {
     <stapps-simple-card
-    *ngIf="item.majors"
       [title]="'majors' | propertyNameTranslate: item"
       [content]="item.majors"
     ></stapps-simple-card>
-</ng-container>
+  }
-<ion-card *ngIf="item.catalogs">
+}
+@if (item.catalogs) {
+  <ion-card>
     <ion-card-header>{{ 'superCatalogs' | propertyNameTranslate: 'catalog' | titlecase }}</ion-card-header>
     <ion-card-content>
+      @for (item of item.catalogs; track item) {
         <event-route-path
-      *ngFor="let item of item.catalogs"
           [maxItems]="1"
           [itemsAfterCollapse]="1"
           [itemsBeforeCollapse]="0"
@@ -52,5 +56,7 @@
           [more]="item.uid | lazyThing: 'superCatalogs'"
         >
         </event-route-path>
+      }
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/types/event/event-list-item.html

@@ -14,27 +14,39 @@
 -->
 
 <ion-grid>
-  <ion-row *ngIf="item.type === 'academic event'">
+  @if (item.type === 'academic event') {
+    <ion-row>
       <ion-col>
         <div class="ion-text-wrap">
           <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-        <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate: item }}</p>
+          @if (item.description) {
-        <p *ngIf="item.academicTerms" class="title-sub">
+            <p class="title-sub">{{ 'description' | thingTranslate: item }}</p>
-          {{ 'name' | thingTranslate: item.academicTerms[0] }}
+          }
-        </p>
+          @if (item.academicTerms) {
-        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
+            <p class="title-sub">{{ 'name' | thingTranslate: item.academicTerms[0] }}</p>
-        <ion-note *ngIf="item.categories">
+          }
-          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+          @if (!item.categories) {
-        </ion-note>
+            <ion-note>{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
+          }
+          @if (item.categories) {
+            <ion-note> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-note>
+          }
         </div>
       </ion-col>
     </ion-row>
-  <ion-row *ngIf="item.type === 'sport course'">
+  }
+  @if (item.type === 'sport course') {
+    <ion-row>
       <ion-col>
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-      <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate: item }}</p>
+        @if (item.description) {
-      <p *ngIf="item.academicTerms" class="title-sub">{{ 'name' | thingTranslate: item.academicTerms[0] }}</p>
+          <p class="title-sub">{{ 'description' | thingTranslate: item }}</p>
+        }
+        @if (item.academicTerms) {
+          <p class="title-sub">{{ 'name' | thingTranslate: item.academicTerms[0] }}</p>
+        }
         <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
       </ion-col>
     </ion-row>
+  }
 </ion-grid>

frontend/app/src/app/modules/data/types/event/event-route-path.html

@@ -19,46 +19,46 @@
   [itemsAfterCollapse]="itemsAfterCollapse"
   [itemsBeforeCollapse]="itemsBeforeCollapse"
 >
-  <ion-breadcrumb *ngFor="let item of items">
+  @for (item of items; track item) {
-    <ion-label class="crumb-label" *ngIf="item" [routerLink]="['/data-detail', item.uid]"
+    <ion-breadcrumb>
-      >{{ 'name' | thingTranslate : $any(item) }}</ion-label
+      @if (item) {
-    >
+        <ion-label class="crumb-label" [routerLink]="['/data-detail', item.uid]">{{
+          'name' | thingTranslate: $any(item)
+        }}</ion-label>
+      }
     </ion-breadcrumb>
+  }
 </ion-breadcrumbs>
 <ion-popover #popover>
   <ng-template>
     <ion-list lines="none">
-      <ng-container *ngIf="moreAnchor === 'start'">
+      @if (moreAnchor === 'start') {
-        <ng-container *ngIf="more | async as more">
+        @if (more | async; as more) {
-          <ng-container
+          @for (item of more; track item) {
-            *ngFor="let item of more"
+            <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
-            [ngTemplateOutlet]="popoverItem"
+          }
-            [ngTemplateOutletContext]="{item}"
+        }
-          ></ng-container>
+      }
-        </ng-container>
+      @if (showSelfInPopover) {
-      </ng-container>
+        @for (item of items; track item) {
-      <ng-container *ngIf="showSelfInPopover">
+          <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
-        <ng-container
+        }
-          *ngFor="let item of items"
+      }
-          [ngTemplateOutlet]="popoverItem"
+      @if (moreAnchor === 'end') {
-          [ngTemplateOutletContext]="{item}"
+        @if (more | async; as more) {
-        ></ng-container>
+          @for (item of more; track item) {
-      </ng-container>
+            <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
-      <ng-container *ngIf="moreAnchor === 'end'">
+          }
-        <ng-container *ngIf="more | async as more">
+        }
-          <ng-container
+      }
-            *ngFor="let item of more"
-            [ngTemplateOutlet]="popoverItem"
-            [ngTemplateOutletContext]="{item}"
-          ></ng-container>
-        </ng-container>
-      </ng-container>
     </ion-list>
   </ng-template>
 </ion-popover>
 
 <ng-template #popoverItem let-item="item">
-  <ion-item *ngIf="item" [routerLink]="['/data-detail', item.uid]" (click)="popover.dismiss()">
+  @if (item) {
+    <ion-item [routerLink]="['/data-detail', item.uid]" (click)="popover.dismiss()">
       {{ 'name' | thingTranslate: $any(item) }}
     </ion-item>
+  }
 </ng-template>

frontend/app/src/app/modules/data/types/favorite/favorite-list-item.html

@@ -20,12 +20,14 @@
         <ion-label class="title">
           {{ 'name' | thingTranslate: item }}: {{ 'name' | thingTranslate: item.data }}
         </ion-label>
-        <p *ngIf="item.data.description" class="title-sub">
+        @if (item.data.description) {
+          <p class="title-sub">
             <stapps-long-inline-text
               [text]="'description' | thingTranslate: item.data"
               [size]="80"
             ></stapps-long-inline-text>
           </p>
+        }
         <ion-note>{{ 'type' | thingTranslate: item }} ({{ 'type' | thingTranslate: item.data }})</ion-note>
       </div>
     </ion-col>

frontend/app/src/app/modules/data/types/job-posting/job-posting-detail-content.html

@@ -16,27 +16,31 @@
 <ion-card>
   <ion-card-content [innerHtml]="item.description"> </ion-card-content>
 </ion-card>
-<ion-card *ngIf="item.sameAs">
+@if (item.sameAs) {
+  <ion-card>
     <ion-card-header> {{ 'sameAs' | propertyNameTranslate: item | titlecase }} </ion-card-header>
     <ion-card-content>
       <stapps-external-link [link]="item.sameAs" [text]="item.name"></stapps-external-link>
     </ion-card-content>
   </ion-card>
-
+}
-<ion-card *ngIf="item.employerOverview">
+@if (item.employerOverview) {
+  <ion-card>
     <ion-card-header> {{ 'jobs.employer' | translate }} </ion-card-header>
     <ion-card-content>
+      @if (item.employerOverview.sameAs) {
         <stapps-external-link
-      *ngIf="item.employerOverview.sameAs"
           [link]="item.employerOverview.sameAs"
           [text]="item.employerOverview.name"
         ></stapps-external-link>
-    <p *ngIf="!item.employerOverview.sameAs">{{ item.employerOverview.name }}</p>
+      }
-    <ion-img
+      @if (!item.employerOverview.sameAs) {
-      *ngIf="item.employerOverview.image"
+        <p>{{ item.employerOverview.name }}</p>
-      class="company-image"
+      }
-      src="{{ item.employerOverview.image }}"
+      @if (item.employerOverview.image) {
-    ></ion-img>
+        <ion-img class="company-image" src="{{ item.employerOverview.image }}"></ion-img>
+      }
       <p [innerHtml]="item.employerOverview.description"></p>
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/types/message/message-detail-content.html

@@ -13,7 +13,8 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<div *ngIf="!item.categories.includes('news'); else news">
+@if (!item.categories.includes('news')) {
+  <div>
     <stapps-simple-card
       [title]="'messageBody' | propertyNameTranslate: item | titlecase"
       [content]="'messageBody' | thingTranslate: item"
@@ -22,41 +23,48 @@
       [title]="'audiences' | propertyNameTranslate: item | titlecase"
       [content]="'audiences' | thingTranslate: item"
     ></stapps-simple-card>
+    @if (item.datePublished) {
       <stapps-simple-card
-    *ngIf="item.datePublished"
         [title]="'datePublished' | propertyNameTranslate: item | titlecase"
         [content]="item.datePublished | amDateFormat: 'll'"
       ></stapps-simple-card>
+    }
+    @if (item.authors) {
       <stapps-simple-card
-    *ngIf="item.authors"
         [title]="'authors' | propertyNameTranslate: item | titlecase"
         [content]="item.authors"
       ></stapps-simple-card>
+    }
+    @if (item.publishers) {
       <stapps-simple-card
-    *ngIf="item.publishers"
         [title]="'publishers' | propertyNameTranslate: item | titlecase"
         [content]="item.publishers"
       ></stapps-simple-card>
+    }
   </div>
-
+} @else {
-<ng-template #news>
+  @if (item.image) {
-  <ion-thumbnail *ngIf="item.image" style="background-image: url('{{ item.image }}')">
+    <ion-thumbnail style="background-image: url('{{ item.image }}')">
       <ion-img
         src="{{ item.image }}"
         (ionError)="$any($event.target).nextSibling.style.display = 'none'"
         alt="{{ item.name }}"
       ></ion-img>
     </ion-thumbnail>
+  }
+  @if (item.datePublished) {
     <stapps-simple-card
-    *ngIf="item.datePublished"
       class="date-published"
       content="{{ item.datePublished | amCalendar | sentencecase }}"
     ></stapps-simple-card>
+  }
   <stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
-  <ion-card *ngIf="item.sameAs">
+  @if (item.sameAs) {
+    <ion-card>
       <ion-card-header> {{ 'sameAs' | propertyNameTranslate: item | titlecase }} </ion-card-header>
       <ion-card-content>
         <stapps-external-link [link]="item.sameAs" [text]="item.name"></stapps-external-link>
       </ion-card-content>
     </ion-card>
-</ng-template>
+  }
+}

frontend/app/src/app/modules/data/types/message/message-list-item.html

@@ -18,9 +18,11 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-        <p *ngIf="item.messageBody">
+        @if (item.messageBody) {
+          <p>
             <stapps-long-inline-text [text]="item.messageBody" [size]="80"></stapps-long-inline-text>
           </p>
+        }
         <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
       </div>
     </ion-col>

frontend/app/src/app/modules/data/types/organization/organization-detail-content.html

@@ -13,14 +13,15 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-card *ngIf="item.inPlace">
+@if (item.inPlace) {
+  <ion-card>
     <ion-card-header> {{ 'inPlace' | propertyNameTranslate: item | titlecase }} </ion-card-header>
     <ion-card-content>
       <ion-icon name="pin_drop"></ion-icon>
       <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate: item.inPlace }}</a>
-    <stapps-address-detail
+      @if (item.inPlace.address) {
-      *ngIf="item.inPlace.address"
+        <stapps-address-detail [address]="item.inPlace.address"></stapps-address-detail>
-      [address]="item.inPlace.address"
+      }
-    ></stapps-address-detail>
     </ion-card-content>
   </ion-card>
+}

frontend/app/src/app/modules/data/types/organization/organization-list-item.html

@@ -18,15 +18,21 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-        <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate : item }}</p>
+        @if (item.description) {
+          <p class="title-sub">{{ 'description' | thingTranslate: item }}</p>
+        }
         <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
       </div>
     </ion-col>
-    <ion-col width-20 text-right *ngIf="item.inPlace">
+    @if (item.inPlace) {
-      <span *ngIf="item.inPlace">
+      <ion-col width-20 text-right>
+        @if (item.inPlace) {
+          <span>
             <ion-icon name="pin_drop"></ion-icon>
             {{ 'name' | thingTranslate: item.inPlace }}
           </span>
+        }
       </ion-col>
+    }
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/data/types/periodical/periodical-detail-content.html

@@ -13,61 +13,75 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-card *ngIf="item.sameAs">
+@if (item.sameAs) {
+  <ion-card>
     <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <stapps-external-link [text]="'name' | thingTranslate : item" [link]="item.sameAs"></stapps-external-link>
+      <stapps-external-link
+        [text]="'name' | thingTranslate: item"
+        [link]="item.sameAs"
+      ></stapps-external-link>
     </ion-card-content>
   </ion-card>
-
+}
+@if (!item.sameAs) {
   <stapps-simple-card
-  *ngIf="!item.sameAs"
     [title]="'name' | propertyNameTranslate: item | sentencecase"
     [content]="'name' | thingTranslate: item"
   >
   </stapps-simple-card>
-
+}
+@if (item.description) {
   <stapps-simple-card
-  *ngIf="item.description"
     [title]="'hebisSearch.detail.description' | translate | sentencecase"
     [content]="item.description"
   ></stapps-simple-card>
-
+}
+@if (item.sourceOrganization) {
   <stapps-simple-card
-  *ngIf="item.sourceOrganization"
     [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
     [content]="item.sourceOrganization"
   ></stapps-simple-card>
-
+}
-<ion-card *ngIf="item.authors && item.authors.length > 0">
+@if (item.authors && item.authors.length > 0) {
+  <ion-card>
     <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate : author }}</ion-label>
+      @for (author of item.authors; track author) {
+        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+      }
     </ion-card-content>
   </ion-card>
-
+}
+@if (item.firstPublished && !item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && !item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="item.firstPublished + '-'"
   >
   </stapps-simple-card>
+}
+@if (item.firstPublished && item.lastPublished) {
   <stapps-simple-card
-  *ngIf="item.firstPublished && item.lastPublished"
     [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
     [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
   >
   </stapps-simple-card>
-<ion-card *ngIf="item.publications">
+}
+@if (item.publications) {
+  <ion-card>
     <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
-    <p *ngFor="let publication of item.publications">
+      @for (publication of item.publications; track publication) {
-      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+        <p>
-      }} {{ publication.publisher }}
+          {{ publication.locations | join: ', ' }}
+          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
         </p>
+      }
     </ion-card-content>
   </ion-card>
-<ion-card *ngIf="item.categories">
+}
+@if (item.categories) {
+  <ion-card>
     <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
     <ion-card-content>
       <ion-chip [color]="'primary'">
@@ -76,9 +90,11 @@
       </ion-chip>
     </ion-card-content>
   </ion-card>
+}
+@if (item.ISSNs) {
   <stapps-simple-card
-  *ngIf="item.ISSNs"
     [title]="'ISSNs' | propertyNameTranslate: item | sentencecase"
     [content]="item.ISSNs | join: ', '"
   >
   </stapps-simple-card>
+}

frontend/app/src/app/modules/data/types/periodical/periodical-list-item.html

@@ -18,16 +18,19 @@
     <ion-col>
       <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
       <p>
-        <ng-container *ngFor="let author of item.authors">
+        @for (author of item.authors; track author) {
-          {{ 'name' | thingTranslate : author }}</ng-container
+          {{ 'name' | thingTranslate: author }}
-        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
+        }
-        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+        @if (item.authors && item.authors && item.firstPublished) {
-          >{{ item.firstPublished }}</ng-container
+          ,&nbsp;
-        ><ng-template #dateRange
+        }
-          ><ng-container *ngIf="item.firstPublished && item.lastPublished"
+        @if (item.firstPublished && !item.lastPublished) {
-            >{{ [item.firstPublished, item.lastPublished] | join : ' - ' }}</ng-container
+          {{ item.firstPublished }}
-          ></ng-template
+        } @else {
-        >
+          @if (item.firstPublished && item.lastPublished) {
+            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+          }
+        }
       </p>
       <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
     </ion-col>

frontend/app/src/app/modules/data/types/person/person-detail-content.html

@@ -12,41 +12,63 @@
 ~ You should have received a copy of the GNU General Public License along with
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
-<ion-list *ngIf="item.workLocations">
+@if (item.workLocations) {
-  <ion-card *ngFor="let contactPoint of contactPoints; index as i">
+  <ion-list>
+    @for (contactPoint of contactPoints; track contactPoint; let i = $index) {
+      <ion-card>
         <ion-card-header>
-      <ng-container *ngIf="item.workLocations.length > 1">{{ i + 1 }}.</ng-container>
+          @if (item.workLocations.length > 1) {
+            {{ i + 1 }}.
+          }
           {{ 'type' | thingTranslate: contactPoint | titlecase }}
         </ion-card-header>
         <ion-card-content>
-      <p *ngIf="contactPoint.telephone">
+          @if (contactPoint.telephone) {
+            <p>
               {{ 'telephone' | propertyNameTranslate: 'contact point' | titlecase }}:
               <a [href]="'tel:' + contactPoint.telephone">{{ contactPoint.telephone }}</a>
             </p>
-      <p *ngIf="contactPoint.email">
+          }
+          @if (contactPoint.email) {
+            <p>
               {{ 'email' | propertyNameTranslate: 'contact point' | titlecase }}:
               <a [href]="'mailto:' + contactPoint.email">{{ contactPoint.email }}</a>
             </p>
-      <p *ngIf="contactPoint.faxNumber">
+          }
-        {{ 'faxNumber' | propertyNameTranslate : 'contact point' | titlecase }}: {{ contactPoint.faxNumber }}
+          @if (contactPoint.faxNumber) {
+            <p>
+              {{ 'faxNumber' | propertyNameTranslate: 'contact point' | titlecase }}:
+              {{ contactPoint.faxNumber }}
             </p>
-      <p *ngIf="contactPoint.officeHours">
+          }
-        {{ 'officeHours' | propertyNameTranslate : 'contact point' | titlecase }}: {{ contactPoint.officeHours
+          @if (contactPoint.officeHours) {
-        }}
+            <p>
+              {{ 'officeHours' | propertyNameTranslate: 'contact point' | titlecase }}:
+              {{ contactPoint.officeHours }}
             </p>
-      <p *ngIf="contactPoint.url">
+          }
+          @if (contactPoint.url) {
+            <p>
               {{ 'url' | propertyNameTranslate: 'contact point' | titlecase }}:
               <a [href]="contactPoint.url">{{ contactPoint.url }}</a>
             </p>
-      <p *ngIf="isContactPoint(contactPoint) && contactPoint.areaServed">
+          }
+          @if (isContactPoint(contactPoint) && contactPoint.areaServed) {
+            <p>
               {{ 'areaServed' | propertyNameTranslate: contactPoint | titlecase }}:
-        <a [routerLink]="['/data-detail', contactPoint.areaServed.uid]">{{ contactPoint.areaServed.name }}</a>
+              <a [routerLink]="['/data-detail', contactPoint.areaServed.uid]">{{
+                contactPoint.areaServed.name
+              }}</a>
             </p>
+          }
         </ion-card-content>
       </ion-card>
+    }
   </ion-list>
+}
+@if (item.jobTitles && item.jobTitles.length > 0) {
   <stapps-simple-card
-  *ngIf="item.jobTitles && item.jobTitles.length > 0"
     [title]="'jobTitles' | propertyNameTranslate: item | titlecase"
     [content]="item.jobTitles"
   ></stapps-simple-card>
+}

frontend/app/src/app/modules/data/types/person/person-list-item.html

@@ -19,18 +19,23 @@
       <div class="ion-text-wrap">
         <ion-label class="title">
           {{ 'name' | thingTranslate: item }}
-          <span *ngIf="item.honorificPrefix">, {{ item.honorificPrefix }}</span>
+          @if (item.honorificPrefix) {
+            <span>, {{ item.honorificPrefix }}</span>
+          }
         </ion-label>
-        <p *ngIf="item.telephone || item.email">
+        @if (item.telephone || item.email) {
-          <span *ngIf="item.telephone">
+          <p>
-            <ion-icon name="call"></ion-icon>&nbsp;{{ item.telephone }}&nbsp; </span
+            @if (item.telephone) {
-          ><span *ngIf="item.email"> <ion-icon name="mail"></ion-icon>&nbsp;{{ item.email }} </span>
+              <span> <ion-icon name="call"></ion-icon>&nbsp;{{ item.telephone }}&nbsp; </span>
+            }
+            @if (item.email) {
+              <span> <ion-icon name="mail"></ion-icon>&nbsp;{{ item.email }} </span>
+            }
           </p>
-        <stapps-long-inline-text
+        }
-          *ngIf="item.jobTitles"
+        @if (item.jobTitles) {
-          [text]="item.jobTitles.join(', ')"
+          <stapps-long-inline-text [text]="item.jobTitles.join(', ')" [size]="50"></stapps-long-inline-text>
-          [size]="50"
+        }
-        ></stapps-long-inline-text>
       </div>
     </ion-col>
   </ion-row>

frontend/app/src/app/modules/data/types/place/place-detail-content.html

@@ -13,27 +13,33 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (isMensaThing(item)) {
   <stapps-place-mensa-detail-content
     [item]="item"
     [openAsModal]="openAsModal"
-  *ngIf="isMensaThing(item)"
   ></stapps-place-mensa-detail-content>
-<ng-container *ngIf="item.type !== 'floor'">
+}
+@if (item.type !== 'floor') {
+  @if (item.categories) {
     <stapps-simple-card
-    *ngIf="item.categories"
       [title]="'categories' | propertyNameTranslate: item | titlecase"
       [content]="'categories' | thingTranslate: item"
     ></stapps-simple-card>
-  <stapps-address-detail *ngIf="item.address" [address]="item.address"></stapps-address-detail>
+  }
-</ng-container>
+  @if (item.address) {
-<ng-container *ngIf="item.type !== 'building'">
+    <stapps-address-detail [address]="item.address"></stapps-address-detail>
-  <ion-card *ngIf="item.inPlace">
+  }
+}
+@if (item.type !== 'building') {
+  @if (item.inPlace) {
+    <ion-card>
       <ion-card-header> {{ 'inPlace' | propertyNameTranslate: item | titlecase }} </ion-card-header>
       <ion-card-content>
         <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
       </ion-card-content>
     </ion-card>
-</ng-container>
+  }
-<ng-container *ngIf="hasValidLocation">
+}
+@if (hasValidLocation) {
   <stapps-map-widget [place]="$any(item)" expandable="true"></stapps-map-widget>
-</ng-container>
+}

frontend/app/src/app/modules/data/types/place/place-list-item.html

@@ -13,28 +13,35 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 <ng-template #distanceView>
-  <ion-label class="distance" *ngIf="distance | async as distance;" @fade>
+  @if (distance | async; as distance) {
+    <ion-label class="distance" @fade>
       <ion-icon name="directions_walk"></ion-icon>
       {{ distance | metersLocalized }}
     </ion-label>
+  }
 </ng-template>
 <ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
-<ng-container *ngIf="_item.type !== 'floor'">
+@if (_item.type !== 'floor') {
   <stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
-  <ion-note *ngIf="_item.categories && _item.type !== 'building'; else onlyType">
+  @if (_item.categories && _item.type !== 'building') {
+    <ion-note>
       <ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
       <ng-container *ngTemplateOutlet="distanceView"></ng-container>
     </ion-note>
-  <ng-template #onlyType>
+  } @else {
     <ion-note>
       <ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
       <ng-container *ngTemplateOutlet="distanceView"></ng-container>
     </ion-note>
-  </ng-template>
+  }
-</ng-container>
+}
-<p *ngIf="_item.description">{{ 'description' | thingTranslate: _item }}</p>
+@if (_item.description) {
-<ng-container *ngIf="_item.type !== 'building'">
+  <p>{{ 'description' | thingTranslate: _item }}</p>
-  <ion-col size="auto" class="in-place" *ngIf="_item.inPlace">
+}
+@if (_item.type !== 'building') {
+  @if (_item.inPlace) {
+    <ion-col size="auto" class="in-place">
       <ion-icon name="pin_drop"></ion-icon><ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
     </ion-col>
-</ng-container>
+  }
+}

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.html

@@ -18,12 +18,12 @@
     <ng-container *ngIf="(dishes | json) !== '{}'; else empty">
       <ion-segment [(ngModel)]="selectedDay" mode="md">
         <ion-segment-button *ngFor="let day of dishes | keyvalue" [value]="day.key">
-          <ion-label class="ion-hide-sm-down"
+          <ion-label class="ion-hide-sm-down">{{
-            >{{ day.key | dateFormat : 'weekday:long,month:numeric,day:numeric' }}</ion-label
+            day.key | dateFormat: 'weekday:long,month:numeric,day:numeric'
-          >
+          }}</ion-label>
-          <ion-label class="ion-hide-sm-up"
+          <ion-label class="ion-hide-sm-up">{{
-            >{{ day.key | dateFormat : 'weekday:short,month:numeric,day:numeric' }}</ion-label
+            day.key | dateFormat: 'weekday:short,month:numeric,day:numeric'
-          >
+          }}</ion-label>
         </ion-segment-button>
       </ion-segment>
       <ng-container [ngSwitch]="selectedDay">
@@ -33,8 +33,10 @@
               <ng-container *ngFor="let section of date.value | keyvalue">
                 <ion-list-header *ngIf="section.value[0].menuSection" lines="inset">
                   <ion-label class="title">
-                    {{ 'data.types.dish.detail.' + section.value[0].menuSection.name | translate | titlecase
+                    {{
-                    }} {{ section.value[0].menuSection.servingHours }}
+                      'data.types.dish.detail.' + section.value[0].menuSection.name | translate | titlecase
+                    }}
+                    {{ section.value[0].menuSection.servingHours }}
                   </ion-label>
                 </ion-list-header>
                 <ng-container *ngFor="let dish of section.value; index as j">

frontend/app/src/app/modules/data/types/semester/semester-detail-content.html

@@ -13,8 +13,8 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (item.eventsStartDate && item.eventsEndDate) {
   <stapps-simple-card
-  *ngIf="item.eventsStartDate && item.eventsEndDate"
     [title]="
       ('eventsStartDate' | propertyNameTranslate: item | titlecase) +
       ' - ' +
@@ -24,3 +24,4 @@
       (item.eventsStartDate | amDateFormat: 'll') + ' - ' + (item.eventsEndDate | amDateFormat: 'll')
     "
   ></stapps-simple-card>
+}

frontend/app/src/app/modules/data/types/video/video-detail-content.html

@@ -13,20 +13,25 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
+@if (item.actors) {
   <stapps-simple-card
-  *ngIf="item.actors"
     [title]="'actors' | propertyNameTranslate: item | titlecase"
     [content]="item.actors"
   ></stapps-simple-card>
+}
+@if (item.authors) {
   <stapps-simple-card
-  *ngIf="item.authors"
     [title]="'authors' | propertyNameTranslate: item | titlecase"
     [content]="item.authors"
   ></stapps-simple-card>
+}
+@if (item.datePublished) {
   <stapps-simple-card
-  *ngIf="item.datePublished"
     [title]="'datePublished' | propertyNameTranslate: item | titlecase"
     [content]="item.datePublished | amDateFormat: 'll'"
   >
   </stapps-simple-card>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+}
+@if (item.offers) {
+  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
+}

frontend/app/src/app/modules/data/types/video/video-list-item.html

@@ -3,16 +3,20 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-        <p *ngIf="item.description" class="title-sub">
+        @if (item.description) {
+          <p class="title-sub">
             <stapps-long-inline-text
               [text]="'description' | thingTranslate: item"
               [size]="80"
             ></stapps-long-inline-text>
           </p>
-        <p *ngIf="item.duration">
+        }
-          {{ 'duration' | propertyNameTranslate : item | titlecase }}: {{ item.duration | amDuration :
+        @if (item.duration) {
-          'seconds' }}
+          <p>
+            {{ 'duration' | propertyNameTranslate: item | titlecase }}:
+            {{ item.duration | amDuration: 'seconds' }}
           </p>
+        }
         <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
       </div>
     </ion-col>

frontend/app/src/app/modules/feedback/feedback-page.html

@@ -44,12 +44,12 @@
             interface="popover"
             required="true"
           >
-            <ion-select-option value="Comment"
+            <ion-select-option value="Comment">{{
-              >{{ 'feedback.form.type.values.comment' | translate }}</ion-select-option
+              'feedback.form.type.values.comment' | translate
-            >
+            }}</ion-select-option>
-            <ion-select-option value="Bug"
+            <ion-select-option value="Bug">{{
-              >{{ 'feedback.form.type.values.bug' | translate }}</ion-select-option
+              'feedback.form.type.values.bug' | translate
-            >
+            }}</ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item>
@@ -91,9 +91,9 @@
         </ion-item>
         <ion-item lines="none">
           <ion-label
-            ><a style="display: contents" [routerLink]="['/about/privacy']"
+            ><a style="display: contents" [routerLink]="['/about/privacy']">{{
-              >{{ 'feedback.form.termsAgree.1' | translate }}</a
+              'feedback.form.termsAgree.1' | translate
-            ></ion-label
+            }}</a></ion-label
           >
         </ion-item>
         <ion-item>
@@ -110,15 +110,19 @@
         <ion-card>
           <ion-card-title>
             <ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
-              <ng-container *ngIf="!showMetaData; else hide"
+              @if (!showMetaData) {
-                >{{ 'feedback.form.protocolData.show' | translate }}</ng-container
+                {{ 'feedback.form.protocolData.show' | translate }}
-              >
+              } @else {
+                {{ 'feedback.form.protocolData.hide' | translate }}
+              }
               <ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
             </ion-button>
           </ion-card-title>
-          <ion-card-content *ngIf="metaData && showMetaData">
+          @if (metaData && showMetaData) {
+            <ion-card-content>
               <pre>{{ metaData | json }}</pre>
             </ion-card-content>
+          }
         </ion-card>
         <ion-button
           type="submit"

frontend/app/src/app/modules/hebis/daia-availability/daia-availability.html

@@ -17,25 +17,28 @@
   <ion-card>
     <ion-card-header> {{ 'hebisSearch.daia.availability' | translate }} </ion-card-header>
     <ion-card-content>
-      <ng-container *ngIf="holdingsByDepartments">
+      @if (holdingsByDepartments) {
-        <ng-container *ngFor="let holdingsByDepartment of holdingsByDepartments | keyvalue">
+        @for (holdingsByDepartment of holdingsByDepartments | keyvalue; track holdingsByDepartment) {
           <ion-label>
+            @if (holdingsByDepartment.value[0].department.href) {
               <stapps-external-link
-              *ngIf="holdingsByDepartment.value[0].department.href"
                 [text]="holdingsByDepartment.value[0].department.content"
                 [link]="holdingsByDepartment.value[0].department.href"
               >
               </stapps-external-link>
+            }
           </ion-label>
-          <ng-container *ngFor="let holding of holdingsByDepartment.value">
+          @for (holding of holdingsByDepartment.value; track holding) {
             <stapps-daia-holding [holding]="holding"></stapps-daia-holding>
-          </ng-container>
+          }
-        </ng-container>
+        }
-      </ng-container>
+      }
-      <ion-label *ngIf="!holdings"> {{ 'hebisSearch.daia.unavailableAvailability' | translate }} </ion-label>
+      @if (!holdings) {
-      <ion-label *ngIf="holdings?.length === 0">
+        <ion-label> {{ 'hebisSearch.daia.unavailableAvailability' | translate }} </ion-label>
-        {{ 'hebisSearch.daia.unknownAvailability' | translate }}
+      }
-      </ion-label>
+      @if (holdings?.length === 0) {
+        <ion-label> {{ 'hebisSearch.daia.unknownAvailability' | translate }} </ion-label>
+      }
     </ion-card-content>
   </ion-card>
 </ng-container>

frontend/app/src/app/modules/hebis/daia-availability/daia-holding.html

@@ -13,23 +13,32 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 <ion-grid>
-  <ion-row *ngIf="holding.storage && holding.storage.content">
+  @if (holding.storage && holding.storage.content) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.location' | translate }}</ion-col>
       <ion-col size="9" [innerHTML]="holding.storage.content"></ion-col>
     </ion-row>
-  <ion-row *ngIf="holding.signature && !holding.online">
+  }
+  @if (holding.signature && !holding.online) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.signature' | translate }}</ion-col>
       <ion-col size="9">{{ holding.signature }}</ion-col>
     </ion-row>
-  <ion-row *ngIf="holding.holdings">
+  }
+  @if (holding.holdings) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.holdings' | translate }}</ion-col>
       <ion-col size="9">{{ holding.holdings }}</ion-col>
     </ion-row>
-  <ion-row *ngIf="holding.about">
+  }
+  @if (holding.about) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.comment' | translate }}</ion-col>
       <ion-col size="9" [innerHTML]="holding.about"></ion-col>
     </ion-row>
-  <ion-row *ngIf="holding.available && holding.online && resourceLink">
+  }
+  @if (holding.available && holding.online && resourceLink) {
+    <ion-row>
       <ion-col size="3">{{ 'Online' }}</ion-col>
       <ion-col size="9">
         <stapps-external-link
@@ -38,35 +47,43 @@
         ></stapps-external-link
       ></ion-col>
     </ion-row>
-
+  }
-  <ion-row *ngIf="holding.status">
+  @if (holding.status) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.status' | translate }}</ion-col>
       <ion-col size="9">
-      <ion-icon *ngIf="holding.status === 'available'" name="check_circle" color="success"></ion-icon>
+        @if (holding.status === 'available') {
-      <ion-icon *ngIf="holding.status === 'library_only'" name="check_circle" color="warning"></ion-icon>
+          <ion-icon name="check_circle" color="success"></ion-icon>
-      <ion-icon
+        }
-        *ngIf="['checked_out', 'not_yet_available', 'not_available'].indexOf(holding.status) > -1"
+        @if (holding.status === 'library_only') {
-        name="cancel"
+          <ion-icon name="check_circle" color="warning"></ion-icon>
-        color="danger"
+        }
-      >
+        @if (['checked_out', 'not_yet_available', 'not_available'].indexOf(holding.status) > -1) {
-      </ion-icon>
+          <ion-icon name="cancel" color="danger"> </ion-icon>
+        }
         {{ 'hebisSearch.daia.status_states' + '.' + holding.status | translate }}
-      <stapps-external-link
+        @if (
-        *ngIf="(holding.status === 'available' || holding.status === 'library_only') && holding.available && holding.available.href"
+          (holding.status === 'available' || holding.status === 'library_only') &&
-        [text]="'hebisSearch.daia.order' | translate"
+          holding.available &&
-        [link]="holding.available.href"
+          holding.available.href
-      >
+        ) {
+          <stapps-external-link [text]="'hebisSearch.daia.order' | translate" [link]="holding.available.href">
           </stapps-external-link>
+        }
+        @if (holding.status === 'checked_out' && holding.unavailable && holding.unavailable.href) {
           <stapps-external-link
-        *ngIf="holding.status === 'checked_out' && holding.unavailable && holding.unavailable.href"
             [text]="'hebisSearch.daia.reserve' | translate"
             [link]="holding.unavailable.href"
           >
           </stapps-external-link>
+        }
       </ion-col>
     </ion-row>
-  <ion-row *ngIf="holding.dueDate">
+  }
+  @if (holding.dueDate) {
+    <ion-row>
       <ion-col size="3">{{ 'hebisSearch.daia.dueDate' | translate }}</ion-col>
       <ion-col size="9">{{ holding.dueDate | amDateFormat: 'll' }}</ion-col>
     </ion-row>
+  }
 </ion-grid>

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.html

@@ -13,17 +13,18 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<div [ngSwitch]="item.type">
+<div>
-  <stapps-book-detail-content [item]="$any(item)" *ngSwitchCase="'book'"></stapps-book-detail-content>
+  @switch (item.type) {
-  <stapps-periodical-detail-content
+    @case ('book') {
-    [item]="$any(item)"
+      <stapps-book-detail-content [item]="$any(item)"></stapps-book-detail-content>
-    *ngSwitchCase="'periodical'"
+    }
-  ></stapps-periodical-detail-content>
+    @case ('periodical') {
-  <stapps-article-detail-content
+      <stapps-periodical-detail-content [item]="$any(item)"></stapps-periodical-detail-content>
-    [item]="$any(item)"
+    }
-    *ngSwitchCase="'article'"
+    @case ('article') {
-  ></stapps-article-detail-content>
+      <stapps-article-detail-content [item]="$any(item)"></stapps-article-detail-content>
-  <ng-container *ngSwitchDefault>
+    }
+    @default {
       <ion-item class="ion-text-wrap" lines="inset">
         <ion-thumbnail slot="start" class="ion-margin-end">
           <ion-icon color="dark" [name]="item.type | dataIcon"></ion-icon>
@@ -39,10 +40,12 @@
           </ion-row>
         </ion-grid>
       </ion-item>
+      @if (item.description) {
         <stapps-simple-card
-      *ngIf="item.description"
           [title]="'description' | propertyNameTranslate: item | titlecase"
           [content]="'description' | thingTranslate: item"
         ></stapps-simple-card>
-  </ng-container>
+      }
+    }
+  }
 </div>

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html

@@ -20,31 +20,39 @@
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons slot="primary">
-      <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
+      @if (item) {
+        <stapps-favorite-button [item]="$any(item)"></stapps-favorite-button>
+      }
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-no-padding">
-  <div [ngSwitch]="true">
+  <div>
-    <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
+    @switch (true) {
+      @case (!item && (isDisconnected | async)) {
         <div class="centered-message-container">
           <ion-icon name="signal_disconnected"></ion-icon>
           <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
         </div>
-    </ng-container>
+      }
-    <ng-container *ngSwitchCase="item === null">
+      @case (item === null) {
         <div class="centered-message-container">
           <ion-icon name="link_off"></ion-icon>
           <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
         </div>
-    </ng-container>
+      }
-    <ng-container *ngSwitchCase="!item && item !== null">
+      @case (!item && item !== null) {
         <stapps-skeleton-list-item></stapps-skeleton-list-item>
         <stapps-skeleton-simple-card></stapps-skeleton-simple-card>
-    </ng-container>
+      }
-    <ng-container *ngSwitchDefault>
+      @default {
-      <stapps-hebis-detail-content *ngIf="item" [item]="item"></stapps-hebis-detail-content>
+        @if (item) {
-      <stapps-daia-availability *ngIf="item"></stapps-daia-availability>
+          <stapps-hebis-detail-content [item]="item"></stapps-hebis-detail-content>
-    </ng-container>
+        }
+        @if (item) {
+          <stapps-daia-availability></stapps-daia-availability>
+        }
+      }
+    }
   </div>
 </ion-content>

frontend/app/src/app/modules/library/account/account.page.html

@@ -23,27 +23,28 @@
 </ion-header>
 
 <ion-content>
-  <p *ngIf="name; else loading">
+  @if (name) {
-    {{ 'library.account.greeting' | translate }} {{ name | firstLastName }}! {{
+    <p>
-    'library.account.login.success' | translate }}
+      {{ 'library.account.greeting' | translate }} {{ name | firstLastName }}!
+      {{ 'library.account.login.success' | translate }}
     </p>
-  <ng-template #loading>
+  } @else {
     <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-  </ng-template>
+  }
   <ion-item [routerLink]="['profile']">
-    <ion-icon name="account_circle" slot="start"></ion-icon>{{ 'library.account.pages.profile.title' |
+    <ion-icon name="account_circle" slot="start"></ion-icon
-    translate | titlecase }}
+    >{{ 'library.account.pages.profile.title' | translate | titlecase }}
   </ion-item>
   <ion-item [routerLink]="['holds']">
-    <ion-icon name="collections_bookmark" slot="start"></ion-icon>{{ 'library.account.pages.holds.title' |
+    <ion-icon name="collections_bookmark" slot="start"></ion-icon
-    translate | titlecase }}
+    >{{ 'library.account.pages.holds.title' | translate | titlecase }}
   </ion-item>
   <ion-item [routerLink]="['checked-out']">
-    <ion-icon name="book" slot="start"></ion-icon>{{ 'library.account.pages.checked_out.title' | translate |
+    <ion-icon name="book" slot="start"></ion-icon
-    titlecase }}
+    >{{ 'library.account.pages.checked_out.title' | translate | titlecase }}
   </ion-item>
   <ion-item [routerLink]="['fines']">
-    <ion-icon name="request_quote" slot="start"></ion-icon>{{ 'library.account.pages.fines.title' | translate
+    <ion-icon name="request_quote" slot="start"></ion-icon
-    | titlecase }}
+    >{{ 'library.account.pages.fines.title' | translate | titlecase }}
   </ion-item>
 </ion-content>

frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html

@@ -23,25 +23,21 @@
 </ion-header>
 
 <ion-content>
-  <ng-container *ngIf="checkedOutItems; else fallback">
+  @if (checkedOutItems) {
+    @for (checkedOutItem of checkedOutItems; track checkedOutItem) {
       <stapps-paia-item
-      *ngFor="let checkedOutItem of checkedOutItems"
         [item]="checkedOutItem"
         [propertiesToShow]="['label', 'renewals', 'endtime']"
         (documentAction)="onDocumentAction($event)"
         listName="checked_out"
       >
       </stapps-paia-item>
-  </ng-container>
+    } @empty {
-  <ng-template #fallback>
+      <ion-label class="centered-message-container">
-    <stapps-skeleton-list-item
-      [hideThumbnail]="true"
-      *ngIf="!checkedOutItems; else nothingFound"
-    ></stapps-skeleton-list-item>
-    <ng-template #nothingFound>
-      <ion-label *ngIf="checkedOutItems && checkedOutItems.length === 0" class="centered-message-container">
         {{ 'search.nothing_found' | translate | titlecase }}
       </ion-label>
-    </ng-template>
+    }
-  </ng-template>
+  } @else {
+    <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
+  }
 </ion-content>

frontend/app/src/app/modules/library/account/elements/fee-item/fee-item.html

@@ -15,21 +15,26 @@
 
 <ion-item>
   <ion-label class="ion-text-wrap">
-    <ng-container *ngIf="hasEdition">
+    @if (hasEdition) {
-      <h2 *ngIf="book; else loading" class="name">
+      @if (book) {
-        {{ 'library.account.pages.fines.labels.edition' | translate }}: {{ book.name }}
+        <h2 class="name">{{ 'library.account.pages.fines.labels.edition' | translate }}: {{ book.name }}</h2>
+      } @else {
+        <h2>
+          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
         </h2>
-      <ng-template #loading
+      }
-        ><h2>
+    }
-          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></h2
+    @for (property of propertiesToShow; track property) {
-      ></ng-template>
+      @if (fee[property]) {
-    </ng-container>
+        <p>
-    <ng-container *ngFor="let property of propertiesToShow">
-      <p *ngIf="fee[property]">
           {{ 'library.account.pages.fines.labels' + '.' + property | translate }}:
-        <ng-container *ngIf="!['date'].includes(property); else date"> {{ fee[property] }} </ng-container>
+          @if (!['date'].includes(property)) {
-        <ng-template #date> {{ fee[property] | amDateFormat : 'll' }} </ng-template>
+            {{ fee[property] }}
-      </p></ng-container
+          } @else {
-    >
+            {{ fee[property] | amDateFormat: 'll' }}
+          }
+        </p>
+      }
+    }
   </ion-label>
 </ion-item>

frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html

@@ -15,17 +15,22 @@
 
 <ion-item>
   <!-- TODO: text not selectable in Chrome, bugfix needed https://github.com/ionic-team/ionic-framework/issues/24956 -->
-  <ion-label class="ion-text-wrap"
+  <ion-label class="ion-text-wrap">
-    ><h2 *ngIf="item.about" class="name">{{ item.about }}</h2>
+    @if (item.about) {
-    <ng-container *ngFor="let property of propertiesToShow">
+      <h2 class="name">{{ item.about }}</h2>
-      <p *ngIf="item[property]">
+    }
+    @for (property of propertiesToShow; track property) {
+      @if (item[property]) {
+        <p>
           {{ 'library.account.pages' + '.' + listName + '.' + 'labels' + '.' + property | translate }}:
-        <ng-container *ngIf="!['endtime', 'duedate'].includes(property); else date">
+          @if (!['endtime', 'duedate'].includes(property)) {
             {{ item[property] }}
-        </ng-container>
+          } @else {
-        <ng-template #date> {{ $any(item[property]) | amDateFormat : 'll' }} </ng-template>
+            {{ $any(item[property]) | amDateFormat: 'll' }}
+          }
         </p>
-    </ng-container>
+      }
+    }
     <span class="ion-float-right">
       <!--      TODO: Add "cancel button" when functionality ready for production-->
       <!--      <ion-button-->
@@ -35,9 +40,11 @@
       <!--      >-->
       <!--        {{ 'library.account.actions.cancel.header' | translate }}</ion-button-->
       <!--      >-->
-      <ion-button *ngIf="item.canrenew" color="primary" (click)="onClick('renew')">
+      @if (item.canrenew) {
+        <ion-button color="primary" (click)="onClick('renew')">
           {{ 'library.account.actions.renew.header' | translate }}</ion-button
         >
+      }
     </span>
   </ion-label>
 </ion-item>

frontend/app/src/app/modules/library/account/fines/fines-page.html

@@ -22,23 +22,34 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <ion-list *ngIf="fines; else loading">
+  @if (fines) {
-    <stapps-fee-item *ngFor="let fine of fines" [fee]="fine"></stapps-fee-item>
+    <ion-list>
+      @for (fine of fines; track fine) {
+        <stapps-fee-item [fee]="fine"></stapps-fee-item>
+      }
     </ion-list>
+  } @else {
+    @for (_ of [0, 1]; track _) {
+      <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
+    }
+  }
   <ng-template #loading>
-    <stapps-skeleton-list-item *ngFor="let _ of [0, 1]" [hideThumbnail]="true"></stapps-skeleton-list-item>
+    @for (_ of [0, 1]; track _) {
+      <stapps-skeleton-list-item [hideThumbnail]="true"></stapps-skeleton-list-item>
+    }
   </ng-template>
   <ion-grid>
-    <ion-row *ngIf="amount; else amount_loading" class="ion-float-right">
+    @if (amount) {
+      <ion-row class="ion-float-right">
         <ion-col size="auto"> {{ 'library.account.pages.fines.labels.total_amount' | translate }}: </ion-col>
         <ion-col size="auto"> {{ amount }} </ion-col>
       </ion-row>
-    <ng-template #amount_loading>
+    } @else {
       <ion-row class="ion-float-right">
         <ion-col size="auto">
           <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
         </ion-col>
       </ion-row>
-    </ng-template>
+    }
   </ion-grid>
 </ion-content>