feature/migrate to Angular control flow syntax (#4321)

* Migrate to Angular control flow syntax

* Update changelog

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Migrated the `@ghostfolio/client` components to control flow
+- Migrated the `@ghostfolio/ui` components to control flow
+
 ### Fixed
 
 - Added missing assets in _Storybook_ setup

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,3 @@
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +9,6 @@ import { DataSource } from '@prisma/client';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
   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: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatSliderModule
-  ],
+  imports: [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,3 @@
-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 +5,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,3 @@
-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 +6,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,13 @@ 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/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -8,7 +8,6 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -33,7 +32,6 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartComponent,

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

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

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

@@ -1,6 +1,5 @@
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -10,7 +9,6 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
   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,6 @@
 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 +28,6 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatDatepickerModule,

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

@@ -1,5 +1,4 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,7 +27,6 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     FormsModule,
     MatAutocompleteModule,
     MatChipsModule,

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

@@ -1,6 +1,5 @@
 import { DateRange, MarketState } from '@ghostfolio/common/types';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -11,7 +10,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'],