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

* Migrate to Angular control flow syntax * Update changelog
2025-02-17 23:52:02 +05:30 · 2025-02-17 23:52:02 +05:30 · fe6dcdf682
commit fe6dcdf682
parent ec098c8d68
14 changed files with 23 additions and 36 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
+++ b/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,
--- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
+++ b/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'],
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
+++ b/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'
--- a/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts
+++ b/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'
--- a/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts
+++ b/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'
--- a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts
+++ b/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,
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
+++ b/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'
--- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts
+++ b/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,
--- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
+++ b/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>
--- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts
+++ b/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'],
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts
+++ b/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,
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/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,
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts
+++ b/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'],