Feature/migrate UI components to control flow (#3324)

* Migrate to control flow

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Migrated the `@ghostfolio/ui` components to control flow
 - Upgraded `prisma` from version `5.12.1` to `5.13.0`
 
 ### Fixed

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -1,7 +1,6 @@
 import { getLocale } from '@ghostfolio/common/helper';
 import { AccountBalancesResponse } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -36,7 +35,6 @@ import { GfValueComponent } from '../value';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfValueComponent,
     MatButtonModule,
     MatDatepickerModule,

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts

@@ -2,7 +2,6 @@ import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { ISearchResultItem } from '@ghostfolio/ui/assistant/interfaces/interfaces';
 
 import { FocusableOption } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -19,7 +18,7 @@ import { Params, RouterModule } from '@angular/router';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfSymbolModule, RouterModule],
+  imports: [GfSymbolModule, RouterModule],
   selector: 'gf-assistant-list-item',
   standalone: true,
   styleUrls: ['./assistant-list-item.scss'],

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@@ -9,9 +9,9 @@
   >
   <br />
   <small class="text-muted"
-    >{{ item?.symbol | gfSymbol }} · {{ item?.currency
+    >{{ item?.symbol | gfSymbol }} · {{ item?.currency }}
-    }}<ng-container *ngIf="item?.assetSubClassString">
+    @if (item?.assetSubClassString) {
-      · {{ item?.assetSubClassString }}</ng-container
+      · {{ item.assetSubClassString }}
-    ></small
+    }
-  ></a
+  </small></a
 >

libs/ui/src/lib/carousel/carousel.component.ts

@@ -1,6 +1,5 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { LEFT_ARROW, RIGHT_ARROW, TAB } from '@angular/cdk/keycodes';
-import { CommonModule } from '@angular/common';
 import {
   AfterContentInit,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -22,7 +21,7 @@ import { CarouselItem } from './carousel-item.directive';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MatButtonModule],
+  imports: [MatButtonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-carousel',
   standalone: true,

libs/ui/src/lib/currency-selector/currency-selector.component.ts

@@ -2,7 +2,6 @@ import { Currency } from '@ghostfolio/common/interfaces';
 import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -41,7 +40,6 @@ import { map, startWith, takeUntil } from 'rxjs/operators';
     '[id]': 'id'
   },
   imports: [
-    CommonModule,
     FormsModule,
     MatAutocompleteModule,
     MatFormFieldModule,

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -13,7 +12,7 @@ import { GfLogoComponent } from '../logo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfLogoComponent, MatButtonModule, RouterModule],
+  imports: [GfLogoComponent, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-no-transactions-info-indicator',
   standalone: true,

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -5,7 +5,6 @@ import { translate } from '@ghostfolio/ui/i18n';
 import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -53,7 +52,6 @@ import { GfPremiumIndicatorComponent } from '../premium-indicator';
     '[id]': 'id'
   },
   imports: [
-    CommonModule,
     FormsModule,
     GfPremiumIndicatorComponent,
     GfSymbolModule,

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -1,50 +1,36 @@
-<ngx-skeleton-loader
+@if (isLoading) {
-  *ngIf="isLoading; else other"
+  <ngx-skeleton-loader
-  animation="pulse"
+    animation="pulse"
-  appearance="circle"
+    appearance="circle"
-  [theme]="{
+    [theme]="{
-    height: '1.8rem',
+      height: '1.8rem',
-    width: '1.8rem'
+      width: '1.8rem'
-  }"
+    }"
-/>
-
-<ng-template #other>
-  <ion-icon
-    *ngIf="marketState === 'closed' && range === '1d'; else delayed"
-    class="text-muted"
-    name="pause-circle-outline"
-    [size]="size"
   />
-  <ng-template #delayed>
+} @else {
+  @if (marketState === 'closed' && range === '1d') {
+    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
+  } @else if (marketState === 'delayed' && range === '1d') {
+    <ion-icon class="text-muted" name="time-outline" [size]="size" />
+  } @else if (value <= -0.0005) {
+    <ion-icon
+      class="text-danger"
+      name="arrow-down-circle-outline"
+      [ngClass]="{ 'rotate-45-down': value > -0.01 }"
+      [size]="size"
+    />
+  } @else if (value > -0.0005 && value < 0.0005) {
     <ion-icon
-      *ngIf="marketState === 'delayed' && range === '1d'; else trend"
       class="text-muted"
-      name="time-outline"
+      name="arrow-forward-circle-outline"
+      [size]="size"
+    />
+  } @else {
+    <ion-icon
+      class="text-success"
+      name="arrow-up-circle-outline"
+      [ngClass]="{ 'rotate-45-up': value < 0.01 }"
       [size]="size"
     />
-  </ng-template>
+  }
-  <ng-template #trend>
+}
-    <ng-container>
-      <ion-icon
-        *ngIf="value <= -0.0005"
-        class="text-danger"
-        name="arrow-down-circle-outline"
-        [ngClass]="{ 'rotate-45-down': value > -0.01 }"
-        [size]="size"
-      />
-      <ion-icon
-        *ngIf="value > -0.0005 && value < 0.0005"
-        class="text-muted"
-        name="arrow-forward-circle-outline"
-        [size]="size"
-      />
-      <ion-icon
-        *ngIf="value >= 0.0005"
-        class="text-success"
-        name="arrow-up-circle-outline"
-        [ngClass]="{ 'rotate-45-up': value < 0.01 }"
-        [size]="size"
-      />
-    </ng-container>
-  </ng-template>
-</ng-template>