refactor(components): migrate to Angular's built-in control flow

SchweizerischeBundesbahnen · Jun 10, 2024 · 5129826 · 5129826
1 parent 99c2e64
commit 5129826
Show file tree

Hide file tree

Showing 46 changed files with 260 additions and 230 deletions.
diff --git a/apps/components/src/app/app.component.html b/apps/components/src/app/app.component.html
@@ -1,11 +1,12 @@
 <header>
   <nav>
-    <a *ngFor="let tool of tools$ | async"
-       [routerLink]="tool.routerPath"
-       [queryParamsHandling]="'merge'"
-       [class.internal]="tool.internal">
-      {{tool.name}}
-    </a>
+    @for (tool of tools$ | async; track tool) {
+      <a [routerLink]="tool.routerPath"
+         [queryParamsHandling]="'merge'"
+         [class.internal]="tool.internal">
+        {{tool.name}}
+      </a>
+    }
   </nav>
   <div class="theme-switcher">
     <button (click)="onActivateDarkTheme()" sciMaterialIcon>dark_mode</button>

diff --git a/apps/components/src/app/app.component.ts b/apps/components/src/app/app.component.ts
@@ -13,7 +13,7 @@ import {map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {sortArray} from '@scion/toolkit/operators';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 import {SciToggleButtonComponent} from '@scion/components.internal/toggle-button';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
@@ -26,7 +26,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   styleUrls: ['./app.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     RouterLink,
     RouterOutlet,

diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html
@@ -2,17 +2,16 @@
   <h1>sci-accordion (ɵ)</h1>
 
   <sci-accordion [variant]="form.controls.variant.value" [multi]="form.controls.multi.value">
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track item) {
       <!-- item -->
       <ng-template sciAccordionItem [panel]="panel">
         <header>{{item.title}}</header>
       </ng-template>
-
       <!-- item panel -->
       <ng-template #panel>
         {{item.description}}
       </ng-template>
-    </ng-container>
+    }
   </sci-accordion>
 </main>
 

diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts
@@ -9,7 +9,6 @@
  */
 import {Component} from '@angular/core';
 import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion';
@@ -21,7 +20,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta
   styleUrls: ['./sci-accordion-page.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciCheckboxComponent,

diff --git a/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html b/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html
@@ -2,7 +2,9 @@
   <h1>sci-filter-field (ɵ)</h1>
 
   <sci-filter-field placeholder="Enter a filter text" [formControl]="form.controls.filterField"></sci-filter-field>
-  <output *ngIf="filterText">{{filterText}}</output>
+  @if (filterText) {
+    <output>{{filterText}}</output>
+  }
 </main>
 
 <aside [formGroup]="form">

diff --git a/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.ts b/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.ts
@@ -9,7 +9,6 @@
  */
 import {Component} from '@angular/core';
 import {SciFilterFieldComponent} from '@scion/components.internal/filter-field';
-import {NgIf} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
@@ -22,7 +21,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta
   styleUrls: ['./sci-filter-field-page.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciFilterFieldComponent,

diff --git a/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html
@@ -38,4 +38,6 @@ <h1>sci-key-value-field (ɵ)</h1>
 </sci-key-value-field>
 
 <button class="print" (click)="onPrint()">Print</button>
-<output *ngIf="output">{{output | json}}</output>
+@if (output) {
+  <output>{{output | json}}</output>
+}
diff --git a/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts
@@ -11,15 +11,14 @@ import {Component} from '@angular/core';
 import {FormArray, FormBuilder} from '@angular/forms';
 import {SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Dictionary} from '@scion/toolkit/util';
-import {JsonPipe, NgIf} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 
 @Component({
   selector: 'sci-key-value-field-page',
   templateUrl: './sci-key-value-field-page.component.html',
   styleUrls: ['./sci-key-value-field-page.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     JsonPipe,
     SciKeyValueFieldComponent,
   ],

diff --git a/apps/components/src/app/sci-list-page/sci-list-page.component.html b/apps/components/src/app/sci-list-page/sci-list-page.component.html
@@ -1,21 +1,24 @@
 <h1>sci-list (ɵ)</h1>
 
 <sci-list (filter)="onFilter($event)" filterPosition="top">
-  <ng-container *ngFor="let listItem of items$ | async">
+  @for (listItem of items$ | async; track listItem) {
     <!-- list item -->
     <ng-template sciListItem [actions]="[flag_action]">
-      <mark *ngIf="isFlagged(listItem)">
+      @if (isFlagged(listItem)) {
+        <mark>{{listItem}}</mark>
+      }
+      @else {
         {{listItem}}
-      </mark>
-      <ng-container *ngIf="!isFlagged(listItem)">
-        {{listItem}}
-      </ng-container>
+      }
     </ng-template>
-
     <!-- action -->
     <ng-template #flag_action>
-      <button *ngIf="!isFlagged(listItem)" (click)="onFlag(listItem)" sciMaterialIcon>check_box_outline_blank</button>
-      <button *ngIf="isFlagged(listItem)" (click)="onUnflag(listItem)" sciMaterialIcon>check_box</button>
+      @if (isFlagged(listItem)) {
+        <button (click)="onUnflag(listItem)" sciMaterialIcon>check_box</button>
+      }
+      @else {
+        <button (click)="onFlag(listItem)" sciMaterialIcon>check_box_outline_blank</button>
+      }
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/apps/components/src/app/sci-list-page/sci-list-page.component.ts b/apps/components/src/app/sci-list-page/sci-list-page.component.ts
@@ -11,7 +11,7 @@ import {Component} from '@angular/core';
 import {BehaviorSubject, Observable, of} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
 @Component({
@@ -20,8 +20,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   styleUrls: ['./sci-list-page.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     SciListComponent,
     SciListItemDirective,

diff --git a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.html b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.html
@@ -12,11 +12,13 @@ <h1>sci-sashbox</h1>
                [style.--sci-sashbox-splitter-border-radius]="stylingFormGroup.controls['--sci-sashbox-splitter-border-radius'].value"
                [style.--sci-sashbox-splitter-opacity-active]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity-active'].value"
                [style.--sci-sashbox-splitter-opacity-hover]="stylingFormGroup.controls['--sci-sashbox-splitter-opacity-hover'].value">
-    <ng-container *ngFor="let sash of sashes; index as i;">
-      <ng-template sciSash *ngIf="sash.visible" [size]="sash.size" [minSize]="sash.minSize">
-        <section class="sash sash-{{i + 1}}">Sash {{i + 1}}</section>
-      </ng-template>
-    </ng-container>
+    @for (sash of sashes; track sash; let i = $index) {
+      @if (sash.visible) {
+        <ng-template sciSash [size]="sash.size" [minSize]="sash.minSize">
+          <section class="sash sash-{{i + 1}}">Sash {{i + 1}}</section>
+        </ng-template>
+      }
+    }
   </sci-sashbox>
 </main>
 
@@ -33,21 +35,21 @@ <h1>sci-sashbox</h1>
       </div>
     </ng-template>
 
-    <ng-template sciTab *ngFor="let sash of sashes; index as i" [label]="'Sash ' + (i + 1)">
-      <div class="tab">
-        <sci-form-field label="Visible">
-          <sci-checkbox [(ngModel)]="sash.visible"></sci-checkbox>
-        </sci-form-field>
-
-        <sci-form-field label="Size">
-          <input [(ngModel)]="sash.size" placeholder="Value in any CSS unit or unitless as a ratio">
-        </sci-form-field>
-
-        <sci-form-field label="Min size">
-          <input [(ngModel)]="sash.minSize" placeholder="Value in pixel or percent">
-        </sci-form-field>
-      </div>
-    </ng-template>
+    @for (sash of sashes; track sash; let i = $index) {
+      <ng-template sciTab [label]="'Sash ' + (i + 1)">
+        <div class="tab">
+          <sci-form-field label="Visible">
+            <sci-checkbox [(ngModel)]="sash.visible"></sci-checkbox>
+          </sci-form-field>
+          <sci-form-field label="Size">
+            <input [(ngModel)]="sash.size" placeholder="Value in any CSS unit or unitless as a ratio">
+          </sci-form-field>
+          <sci-form-field label="Min size">
+            <input [(ngModel)]="sash.minSize" placeholder="Value in pixel or percent">
+          </sci-form-field>
+        </div>
+      </ng-template>
+    }
 
     <ng-template sciTab label="Styling">
       <div class="tab">
@@ -92,6 +94,8 @@ <h1>sci-sashbox</h1>
   </sci-tabbar>
 </aside>
 
-<div class="glasspane" *ngIf="glasspaneVisible" tabindex="0">
-  <button class="close" (click)="onGlasspaneToggle()" sciMaterialIcon>close</button>
-</div>
+@if (glasspaneVisible) {
+  <div class="glasspane" tabindex="0">
+    <button class="close" (click)="onGlasspaneToggle()" sciMaterialIcon>close</button>
+  </div>
+}
diff --git a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts
@@ -10,7 +10,6 @@
 import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
 import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
-import {NgFor, NgIf} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
@@ -22,8 +21,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta
   styleUrls: ['./sci-sashbox-page.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     FormsModule,
     ReactiveFormsModule,
     SciSashboxComponent,

diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html
@@ -3,24 +3,32 @@ <h1>sci-tabbar (ɵ)</h1>
 
   <sci-tabbar>
     <!-- short content tab -->
-    <ng-template sciTab label="Short Content" name="Short Content" *ngIf="form.controls.shortContentTabVisible.value">
-      <pre>{{loremIpsumShort}}</pre>
-    </ng-template>
+    @if (form.controls.shortContentTabVisible.value) {
+      <ng-template sciTab label="Short Content" name="Short Content">
+        <pre>{{loremIpsumShort}}</pre>
+      </ng-template>
+    }
 
     <!-- long content tab -->
-    <ng-template sciTab label="Long Content" name="Long Content" *ngIf="form.controls.longContentTabVisible.value">
-      <pre>{{loremIpsum}}</pre>
-    </ng-template>
+    @if (form.controls.longContentTabVisible.value) {
+      <ng-template sciTab label="Long Content" name="Long Content">
+        <pre>{{loremIpsum}}</pre>
+      </ng-template>
+    }
 
     <!-- textarea tab -->
-    <ng-template sciTab label="Textarea" name="Textarea" *ngIf="form.controls.textareaTabVisible.value">
-      <textarea placeholder="Enter some text. The text should be preserved when switching between tabs."></textarea>
-    </ng-template>
+    @if (form.controls.textareaTabVisible.value) {
+      <ng-template sciTab label="Textarea" name="Textarea">
+        <textarea placeholder="Enter some text. The text should be preserved when switching between tabs."></textarea>
+      </ng-template>
+    }
 
     <!-- dynamic tabs -->
-    <ng-template sciTab *ngFor="let tab of form.controls.dynamicTabs.value  | appSplit:','" [label]="tab" [name]="tab">
-      {{tab}}
-    </ng-template>
+    @for (tab of form.controls.dynamicTabs.value | appSplit:','; track tab) {
+      <ng-template sciTab [label]="tab" [name]="tab">
+        {{tab}}
+      </ng-template>
+    }
   </sci-tabbar>
 </main>
 
@@ -57,7 +65,9 @@ <h1>sci-tabbar (ɵ)</h1>
           <option value="Short Content">Short Content</option>
           <option value="Long Content">Long Content</option>
           <option value="Textarea">Textarea</option>
-          <option *ngFor="let tab of form.controls.dynamicTabs.value  | appSplit:','" [value]="tab">{{tab}}</option>
+          @for (tab of form.controls.dynamicTabs.value | appSplit:','; track tab) {
+            <option [value]="tab">{{tab}}</option>
+          }
         </select>
 
         <button (click)="onActivateTab()">Activate</button>

diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts
@@ -14,7 +14,6 @@ import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SplitPipe} from '../common/split.pipe';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
-import {NgFor, NgIf} from '@angular/common';
 import loremIpsum from './lorem-ipsum.json';
 
 @Component({
@@ -23,8 +22,6 @@ import loremIpsum from './lorem-ipsum.json';
   styleUrls: ['./sci-tabbar-page.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     ReactiveFormsModule,
     SciCheckboxComponent,
     SciTabbarComponent,

diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html
@@ -14,7 +14,9 @@ <h1>sci-throbber</h1>
       <div class="tab">
         <sci-form-field label="Type" direction="column">
           <select [formControl]="form.controls.type">
-            <option *ngFor="let type of types" [value]="type">{{type}}</option>
+            @for (type of types; track type) {
+              <option [value]="type">{{type}}</option>
+            }
           </select>
         </sci-form-field>
       </div>

diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts
@@ -12,7 +12,6 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciThrobberComponent} from '@scion/components/throbber';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
-import {NgFor} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar';
 
@@ -22,7 +21,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta
   styleUrls: ['./sci-throbber-page.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciThrobberComponent,

diff --git a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html
@@ -4,9 +4,9 @@ <h1>sci-viewport</h1>
   <sci-viewport [scrollbarStyle]="form.controls.scrollbarPresentation.value"
                 [style.--sci-viewport-scrollbar-color]="form.controls.scrollbarColor.value"
                 class="demo">
-    <section *ngFor="let content of form.controls.content.value | appSplit:'\n+'">
-      {{content}}
-    </section>
+    @for (content of form.controls.content.value | appSplit:'\n+'; track content) {
+      <section>{{content}}</section>
+    }
   </sci-viewport>
 </main>
 
@@ -24,7 +24,9 @@ <h1>sci-viewport</h1>
       <div class="tab">
         <sci-form-field label="Style" direction="column">
           <select [formControl]="form.controls.scrollbarPresentation">
-            <option *ngFor="let scrollbarStyle of scrollbarStyles" [value]="scrollbarStyle">{{scrollbarStyle}}</option>
+            @for (scrollbarStyle of scrollbarStyles; track scrollbarStyle) {
+              <option [value]="scrollbarStyle">{{scrollbarStyle}}</option>
+            }
           </select>
         </sci-form-field>