migrate to angular fow syntax

apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts

@@ -3,7 +3,6 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { PROPERTY_API_KEY_GHOSTFOLIO } from '@ghostfolio/common/config';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import {
@@ -18,7 +17,6 @@ import { GhostfolioPremiumApiDialogParams } from './interfaces/interfaces';
 
 @Component({
   imports: [
-    CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfPremiumIndicatorComponent,

apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +10,7 @@ import { DataSource } from '@prisma/client';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-asset-profile-icon',
   styleUrls: ['./asset-profile-icon.component.scss'],

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -1,6 +1,5 @@
 import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,13 +13,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { IRuleSettingsDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [
+  imports: [FormsModule, MatButtonModule, MatDialogModule, MatSliderModule],
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatSliderModule
-  ],
   selector: 'gf-rule-settings-dialog',
   styleUrls: ['./rule-settings-dialog.scss'],
   templateUrl: './rule-settings-dialog.html'

apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -6,7 +6,7 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { IAlertDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [CommonModule, MatButtonModule, MatDialogModule],
+  imports: [MatButtonModule, MatDialogModule],
   selector: 'gf-alert-dialog',
   styleUrls: ['./alert-dialog.scss'],
   templateUrl: './alert-dialog.html'

apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, HostListener } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -7,7 +7,7 @@ import { ConfirmationDialogType } from './confirmation-dialog.type';
 import { IConfirmDialogParams } from './interfaces/interfaces';
 
 @Component({
-  imports: [CommonModule, MatButtonModule, MatDialogModule],
+  imports: [MatButtonModule, MatDialogModule],
   selector: 'gf-confirmation-dialog',
   styleUrls: ['./confirmation-dialog.scss'],
   templateUrl: './confirmation-dialog.html'

apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,7 +7,6 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatDialogModule,

apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts

@@ -3,14 +3,14 @@ import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { translate } from '@ghostfolio/ui/i18n';
 
-import { CommonModule } from '@angular/common';
+
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 
 @Component({
   host: { class: 'page' },
-  imports: [CommonModule, MatButtonModule, RouterModule],
+  imports: [MatButtonModule, RouterModule],
   selector: 'gf-product-page',
   styleUrls: ['./product-page.scss'],
   templateUrl: './product-page.html'

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

@@ -8,7 +8,7 @@ import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -59,7 +59,6 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,
     GfAssistantListItemComponent,
@@ -70,7 +69,7 @@ import {
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-assistant',
   styleUrls: ['./assistant.scss'],

libs/ui/src/lib/assistant/assistant.html

@@ -15,44 +15,48 @@
         [formControl]="searchFormControl"
         [placeholder]="placeholder"
         />
+      @if (deviceType !== 'mobile' && !searchFormControl.value) {
         <div
-        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
           class="hot-key-hint mx-1 px-1"
           >
           /
         </div>
+      }
+      @if (searchFormControl.value) {
         <button
-        *ngIf="searchFormControl.value"
           class="h-100 no-min-width px-3 rounded-0"
           mat-button
           (click)="initialize()"
           >
           <ion-icon class="m-0" name="close-circle-outline" />
         </button>
+      }
+      @if (!searchFormControl.value) {
         <button
-        *ngIf="!searchFormControl.value"
           class="h-100 no-min-width px-3 rounded-0"
           mat-button
           (click)="onCloseAssistant()"
           >
           <ion-icon class="m-0" name="close-outline" />
         </button>
+      }
     </div>
+    @if (isLoading || searchFormControl.value) {
       <div
-      *ngIf="isLoading || searchFormControl.value"
         class="overflow-auto py-3 result-container"
         >
         <div>
           <div class="h6 mb-1 px-2" i18n>Holdings</div>
+          @for (searchResultItem of searchResults?.holdings; track searchResultItem) {
             <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.holdings"
               mode="holding"
               [item]="searchResultItem"
               (clicked)="onCloseAssistant()"
               />
-        <ng-container *ngIf="searchResults?.holdings?.length === 0">
+          }
+          @if (searchResults?.holdings?.length === 0) {
+            @if (isLoading) {
               <ngx-skeleton-loader
-            *ngIf="isLoading"
                 animation="pulse"
                 class="mx-2"
             [theme]="{
@@ -60,20 +64,25 @@
               width: '100%'
             }"
                 />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+            }
-        </ng-container>
+            @if (!isLoading) {
+              <div class="px-2 py-1" i18n>No entries...</div>
+            }
+          }
         </div>
-      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
+        @if (hasPermissionToAccessAdminControl) {
+          <div class="mt-3">
             <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
+            @for (searchResultItem of searchResults?.assetProfiles; track searchResultItem) {
               <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.assetProfiles"
                 mode="assetProfile"
                 [item]="searchResultItem"
                 (clicked)="onCloseAssistant()"
                 />
-        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
+            }
+            @if (searchResults?.assetProfiles?.length === 0) {
+              @if (isLoading) {
                 <ngx-skeleton-loader
-            *ngIf="isLoading"
                   animation="pulse"
                   class="mx-2"
             [theme]="{
@@ -81,10 +90,15 @@
               width: '100%'
             }"
                   />
-          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+              }
-        </ng-container>
+              @if (!isLoading) {
+                <div class="px-2 py-1" i18n>No entries...</div>
+              }
+            }
           </div>
+        }
       </div>
+    }
   </div>
   <form [formGroup]="filterForm">
     @if (!searchFormControl.value) {
@@ -110,12 +124,13 @@
               @for (account of accounts; track account.id) {
                 <mat-option [value]="account.id">
                   <div class="d-flex">
+                    @if (account.Platform?.url) {
                       <gf-asset-profile-icon
-                      *ngIf="account.Platform?.url"
                         class="mr-1"
                         [tooltip]="account.Platform?.name"
                         [url]="account.Platform?.url"
-                    /><span>{{ account.name }}</span>
+                        />
+                      }<span>{{ account.name }}</span>
                     </div>
                   </mat-option>
                 }
@@ -199,4 +214,4 @@
             </div>
           }
         </form>
-</div>
+      </div>

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -33,12 +33,11 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartComponent,
     MatDialogModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-benchmark-detail-dialog',
   styleUrls: ['./benchmark-detail-dialog.component.scss'],

libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html

@@ -1,9 +1,10 @@
 <small class="text-muted">
-  <ng-container i18n>Market data provided by</ng-container>&nbsp;<ng-container
+  <ng-container i18n>Market data provided by</ng-container>&nbsp;@for (dataProviderInfo of dataProviderInfos; track dataProviderInfo; let last = $last) {
-    *ngFor="let dataProviderInfo of dataProviderInfos; let last = last"
+  <a target="_blank" [href]="dataProviderInfo.url">{{
-    ><a target="_blank" [href]="dataProviderInfo.url">{{
     dataProviderInfo.name
     }}</a
-    ><ng-container *ngIf="!last">, </ng-container></ng-container
+    >@if (!last) {
-  >.
+    ,
+  }
+  }.
 </small>

libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts

@@ -1,6 +1,6 @@
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +10,7 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-data-provider-credits',
   styleUrls: ['./data-provider-credits.component.scss'],

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts

@@ -1,7 +1,7 @@
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 
-import { CommonModule } from '@angular/common';
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -29,7 +29,6 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatDatepickerModule,
@@ -37,7 +36,7 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule
-  ],
+],
   selector: 'gf-historical-market-data-editor-dialog',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   styleUrls: ['./historical-market-data-editor-dialog.scss'],

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

@@ -1,5 +1,5 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { CommonModule } from '@angular/common';
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,14 +28,13 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     MatAutocompleteModule,
     MatChipsModule,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule
-  ],
+],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-tags-selector',
   styleUrls: ['./tags-selector.component.scss'],

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

@@ -1,6 +1,6 @@
 import { DateRange, MarketState } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
+
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -11,7 +11,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-trend-indicator',
   styleUrls: ['./trend-indicator.component.scss'],

libs/ui/src/lib/value/value.component.html

@@ -1,20 +1,26 @@
-<div *ngIf="icon" class="align-self-center mr-3">
+@if (icon) {
+  <div class="align-self-center mr-3">
     <ion-icon class="h3 m-0" [name]="icon" />
-</div>
+  </div>
+}
 <div class="d-flex flex-column w-100">
   <ng-template #label><ng-content></ng-content></ng-template>
-  <ng-container *ngIf="value || value === 0 || value === null">
+  @if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
-      <ng-container *ngIf="isNumber || value === null">
+      @if (isNumber || value === null) {
-        <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
+        @if (colorizeSign && !useAbsoluteValue) {
-          <div *ngIf="value > 0" class="mr-1 text-success">+</div>
+          @if (+value > 0) {
-          <div *ngIf="value < 0" class="mr-1 text-danger">-</div>
+            <div class="mr-1 text-success">+</div>
-        </ng-container>
+          }
+          @if (+value < 0) {
+            <div class="mr-1 text-danger">-</div>
+          }
+        }
+        @if (isPercent) {
           <div
-          *ngIf="isPercent"
             class="mb-0 value"
             [ngClass]="{
               'font-weight-bold h2': size === 'large',
@@ -27,8 +33,9 @@
               {{ formattedValue }}%
             }
           </div>
+        }
+        @if (!isPercent) {
           <div
-          *ngIf="!isPercent"
             class="mb-0 value"
             [ngClass]="{
               'font-weight-bold h2': size === 'large',
@@ -41,14 +48,19 @@
               {{ formattedValue }}
             }
           </div>
-        <small *ngIf="unit && size === 'medium'" class="ml-1">
+        }
+        @if (unit && size === 'medium') {
+          <small class="ml-1">
             {{ unit }}
           </small>
-        <div *ngIf="unit && size !== 'medium'" class="ml-1">
+        }
+        @if (unit && size !== 'medium') {
+          <div class="ml-1">
             {{ unit }}
           </div>
-      </ng-container>
+        }
-      <ng-container *ngIf="isString">
+      }
+      @if (isString) {
         <div
           class="mb-0 text-truncate value"
           [ngClass]="{
@@ -58,12 +70,12 @@
         >
           {{ formattedValue }}
         </div>
-      </ng-container>
+      }
     </div>
-  </ng-container>
+  }
 
+  @if (value === undefined) {
     <ngx-skeleton-loader
-    *ngIf="value === undefined"
       animation="pulse"
       [theme]="{
         height:
@@ -71,16 +83,23 @@
         width: '5rem'
       }"
     />
+  }
 
   <ng-container>
-    <div *ngIf="size === 'large'" class="text-truncate">
+    @if (size === 'large') {
+      <div class="text-truncate">
         <span class="h6"
           ><ng-container *ngTemplateOutlet="label"></ng-container
         ></span>
-      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
+        @if (subLabel) {
+          <span class="text-muted"> {{ subLabel }}</span>
+        }
       </div>
-    <small *ngIf="size !== 'large'" class="d-block text-truncate">
+    }
+    @if (size !== 'large') {
+      <small class="d-block text-truncate">
         <ng-container *ngTemplateOutlet="label"></ng-container>
       </small>
+    }
   </ng-container>
 </div>