Task/migrate Angular components from NgClass to class bindings (#6843)

* Migrate components from NgClass to class bindings

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Migrated various components from `NgClass` to class bindings
+
 ### Fixed
 
 - Fixed a visual regression in the bottom navigation bar on mobile

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -20,7 +20,6 @@ import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -57,7 +56,6 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfAccountBalancesComponent,
     GfActivitiesTableComponent,
     GfDialogFooterComponent,

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -91,8 +91,8 @@
 
     <mat-tab-group
       animationDuration="0ms"
+      [class.d-none]="isLoadingActivities"
       [mat-stretch-tabs]="false"
-      [ngClass]="{ 'd-none': isLoadingActivities }"
     >
       <mat-tab>
         <ng-template mat-tab-label>

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -172,7 +172,7 @@
               <ion-icon
                 class="h6 mb-0"
                 name="time-outline"
-                [ngClass]="{ 'text-danger': element.stacktrace?.length > 0 }"
+                [class.text-danger]="element.stacktrace?.length > 0"
               />
             } @else if (element.state === 'failed') {
               <ion-icon

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -309,11 +309,11 @@
       </div>
 
       <mat-paginator
+        [class.d-none]="
+          (isLoading && totalItems === 0) || totalItems <= pageSize
+        "
         [hidePageSize]="true"
         [length]="totalItems"
-        [ngClass]="{
-          'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize
-        }"
         [pageSize]="pageSize"
         [showFirstLastButtons]="true"
         (page)="onChangePage($event)"

apps/client/src/app/components/admin-users/admin-users.html

@@ -19,16 +19,12 @@
               <div class="d-flex align-items-center">
                 <span
                   class="d-none d-sm-inline-block text-monospace"
-                  [ngClass]="{
+                  [class.text-line-through]="element.role === 'INACTIVE'"
-                    'text-line-through': element.role === 'INACTIVE'
-                  }"
                   >{{ element.id }}</span
                 >
                 <span
                   class="d-inline-block d-sm-none text-monospace"
-                  [ngClass]="{
+                  [class.text-line-through]="element.role === 'INACTIVE'"
-                    'text-line-through': element.role === 'INACTIVE'
-                  }"
                   >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
                 @if (element.subscription?.expiresAt) {
@@ -273,11 +269,11 @@
       </div>
 
       <mat-paginator
+        [class.d-none]="
+          (isLoading && totalItems === 0) || totalItems <= pageSize
+        "
         [hidePageSize]="true"
         [length]="totalItems"
-        [ngClass]="{
-          'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize
-        }"
         [pageSize]="pageSize"
         [showFirstLastButtons]="true"
         (page)="onChangePage($event)"

apps/client/src/app/components/header/header.component.html

@@ -1,10 +1,10 @@
 <mat-toolbar class="px-0">
   @if (user) {
-    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+    <div class="d-flex h-100 logo-container" [class.filled]="hasTabs">
       <a
         class="align-items-center h-100 justify-content-start px-2 px-sm-3 rounded-0"
         mat-button
-        [ngClass]="{ 'w-100': hasTabs }"
+        [class.w-100]="hasTabs"
         [routerLink]="['/']"
         (click)="onLogoClick()"
       >
@@ -18,7 +18,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold':
               currentRoute === internalRoutes.home.path ||
               currentRoute === internalRoutes.zen.path,
@@ -35,7 +35,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === internalRoutes.portfolio.path,
             'text-decoration-underline':
               currentRoute === internalRoutes.portfolio.path
@@ -49,7 +49,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === internalRoutes.accounts.path,
             'text-decoration-underline':
               currentRoute === internalRoutes.accounts.path
@@ -64,7 +64,7 @@
             class="d-none d-sm-block rounded"
             i18n
             mat-button
-            [ngClass]="{
+            [class]="{
               'font-weight-bold':
                 currentRoute === internalRoutes.adminControl.path,
               'text-decoration-underline':
@@ -80,7 +80,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === routeResources,
             'text-decoration-underline': currentRoute === routeResources
           }"
@@ -95,7 +95,7 @@
           <a
             class="d-none d-sm-block rounded"
             mat-button
-            [ngClass]="{
+            [class]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
             }"
@@ -115,7 +115,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
           }"
@@ -239,11 +239,10 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [ngClass]="{
+            [class.font-weight-bold]="
-              'font-weight-bold':
+              currentRoute === internalRoutes.home.path ||
-                currentRoute === internalRoutes.home.path ||
+              currentRoute === internalRoutes.zen.path
-                currentRoute === internalRoutes.zen.path
+            "
-            }"
             [routerLink]="['/']"
             >Overview</a
           >
@@ -251,9 +250,9 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [ngClass]="{
+            [class.font-weight-bold]="
-              'font-weight-bold': currentRoute === internalRoutes.portfolio.path
+              currentRoute === internalRoutes.portfolio.path
-            }"
+            "
             [routerLink]="routerLinkPortfolio"
             >Portfolio</a
           >
@@ -261,18 +260,18 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [ngClass]="{
+            [class.font-weight-bold]="
-              'font-weight-bold': currentRoute === internalRoutes.accounts.path
+              currentRoute === internalRoutes.accounts.path
-            }"
+            "
             [routerLink]="routerLinkAccounts"
             >Accounts</a
           >
           <a
             i18n
             mat-menu-item
-            [ngClass]="{
+            [class.font-weight-bold]="
-              'font-weight-bold': currentRoute === internalRoutes.account.path
+              currentRoute === internalRoutes.account.path
-            }"
+            "
             [routerLink]="routerLinkAccount"
             >My Ghostfolio</a
           >
@@ -281,10 +280,9 @@
               class="d-flex d-sm-none"
               i18n
               mat-menu-item
-              [ngClass]="{
+              [class.font-weight-bold]="
-                'font-weight-bold':
+                currentRoute === internalRoutes.adminControl.path
-                  currentRoute === internalRoutes.adminControl.path
+              "
-              }"
               [routerLink]="routerLinkAdminControl"
               >Admin Control</a
             >
@@ -294,9 +292,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [ngClass]="{
+            [class.font-weight-bold]="currentRoute === routeResources"
-              'font-weight-bold': currentRoute === routeResources
-            }"
             [routerLink]="routerLinkResources"
             >Resources</a
           >
@@ -306,7 +302,7 @@
             <a
               class="d-flex d-sm-none"
               mat-menu-item
-              [ngClass]="{ 'font-weight-bold': currentRoute === routePricing }"
+              [class.font-weight-bold]="currentRoute === routePricing"
               [routerLink]="routerLinkPricing"
             >
               <span class="align-items-center d-flex">
@@ -321,7 +317,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [ngClass]="{ 'font-weight-bold': currentRoute === routeAbout }"
+            [class.font-weight-bold]="currentRoute === routeAbout"
             [routerLink]="routerLinkAbout"
             >About Ghostfolio</a
           >
@@ -332,11 +328,11 @@
     </ul>
   }
   @if (user === null) {
-    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+    <div class="d-flex h-100 logo-container" [class.filled]="hasTabs">
       <a
         class="align-items-center h-100 justify-content-start px-2 px-sm-3 rounded-0"
         mat-button
-        [ngClass]="{ 'w-100': hasTabs }"
+        [class.w-100]="hasTabs"
         [routerLink]="['/']"
       >
         <gf-logo
@@ -352,7 +348,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === routeFeatures,
             'text-decoration-underline': currentRoute === routeFeatures
           }"
@@ -365,7 +361,7 @@
           class="d-none d-sm-block rounded"
           i18n
           mat-button
-          [ngClass]="{
+          [class]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
           }"
@@ -378,7 +374,7 @@
           <a
             class="d-sm-block rounded"
             mat-button
-            [ngClass]="{
+            [class]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
             }"
@@ -399,7 +395,7 @@
             class="d-none d-sm-block rounded"
             i18n
             mat-button
-            [ngClass]="{
+            [class]="{
               'font-weight-bold': currentRoute === routeMarkets,
               'text-decoration-underline': currentRoute === routeMarkets
             }"

apps/client/src/app/components/header/header.component.ts

@@ -19,7 +19,6 @@ import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -56,7 +55,6 @@ import { catchError } from 'rxjs/operators';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfAssistantComponent,
     GfLogoComponent,
     GfPremiumIndicatorComponent,

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -29,7 +29,6 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -76,7 +75,6 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfAccountsTableComponent,
     GfActivitiesTableComponent,
     GfDataProviderCreditsComponent,

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -117,13 +117,12 @@
               <gf-value
                 i18n
                 size="medium"
+                [class.text-danger]="
+                  marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
+                  marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                "
                 [isCurrency]="true"
                 [locale]="data.locale"
-                [ngClass]="{
-                  'text-danger':
-                    marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
-                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-                }"
                 [precision]="marketPriceMinPrecision"
                 [unit]="SymbolProfile?.currency"
                 [value]="marketPriceMin"
@@ -134,13 +133,12 @@
               <gf-value
                 i18n
                 size="medium"
+                [class.text-success]="
+                  marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
+                  marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                "
                 [isCurrency]="true"
                 [locale]="data.locale"
-                [ngClass]="{
-                  'text-success':
-                    marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
-                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-                }"
                 [precision]="marketPriceMaxPrecision"
                 [unit]="SymbolProfile?.currency"
                 [value]="marketPriceMax"

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -14,7 +14,6 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -34,7 +33,6 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
   imports: [
-    CommonModule,
     FormsModule,
     GfHoldingsTableComponent,
     GfToggleComponent,

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -44,7 +44,7 @@
           (treemapChartClicked)="onHoldingClicked($event)"
         />
       }
-      <div [ngClass]="{ 'd-none': viewModeFormControl.value !== 'TABLE' }">
+      <div [class.d-none]="viewModeFormControl.value !== 'TABLE'">
         <gf-holdings-table
           [holdings]="holdings"
           [locale]="user?.settings?.locale"

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -14,7 +14,6 @@ import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -29,7 +28,6 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
   imports: [
-    CommonModule,
     GfLineChartComponent,
     GfPortfolioPerformanceComponent,
     MatButtonModule,

apps/client/src/app/components/home-overview/home-overview.html

@@ -11,10 +11,7 @@
         <h4 i18n>Welcome to Ghostfolio</h4>
         <p i18n>Ready to take control of your personal finances?</p>
         <ol class="font-weight-bold">
-          <li
+          <li class="mb-2" [class.text-muted]="user?.accounts?.length > 1">
-            class="mb-2"
-            [ngClass]="{ 'text-muted': user?.accounts?.length > 1 }"
-          >
             <a class="d-block" [routerLink]="routerLinkAccounts"
               ><span i18n>Setup your accounts</span><br />
               <span class="font-weight-normal" i18n
@@ -70,13 +67,13 @@
           <gf-line-chart
             class="position-absolute"
             unit="%"
+            [class.pr-3]="deviceType === 'mobile'"
             [colorScheme]="user?.settings?.colorScheme"
             [hidden]="historicalDataItems?.length === 0"
             [historicalDataItems]="historicalDataItems"
             [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
             [label]="performanceLabel"
             [locale]="user?.settings?.locale"
-            [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
             [showGradient]="true"
             [showLoader]="false"
             [showXAxis]="false"

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -24,11 +24,11 @@
     }
     <div
       class="display-4 font-weight-bold m-0 text-center value-container"
-      [hidden]="isLoading"
+      [class]="{
-      [ngClass]="{
         'text-danger': isAllTimeLow,
         'text-success': isAllTimeHigh
       }"
+      [hidden]="isLoading"
     >
       <span #value id="value"></span>
     </div>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -10,7 +10,6 @@ import {
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,7 +27,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfValueComponent, IonIcon, NgxSkeletonLoaderModule],
+  imports: [GfValueComponent, IonIcon, NgxSkeletonLoaderModule],
   selector: 'gf-portfolio-performance',
   styleUrls: ['./portfolio-performance.component.scss'],
   templateUrl: './portfolio-performance.component.html'

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -181,12 +181,11 @@
     </div>
     <div
       class="align-items-center d-flex justify-content-end"
-      [ngClass]="{
+      [class.cursor-pointer]="
-        'cursor-pointer':
+        hasPermissionToUpdateUserSettings &&
-          hasPermissionToUpdateUserSettings &&
+        !user?.settings?.isRestrictedView &&
-          !user?.settings?.isRestrictedView &&
+        user?.subscription?.type !== 'Basic'
-          user?.subscription?.type !== 'Basic'
+      "
-      }"
       (click)="
         hasPermissionToUpdateUserSettings &&
           !user?.settings?.isRestrictedView &&

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -5,7 +5,6 @@ import { translate } from '@ghostfolio/ui/i18n';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -25,7 +24,7 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfValueComponent, IonIcon, MatTooltipModule],
+  imports: [GfValueComponent, IonIcon, MatTooltipModule],
   selector: 'gf-portfolio-summary',
   styleUrls: ['./portfolio-summary.component.scss'],
   templateUrl: './portfolio-summary.component.html'

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

@@ -1,7 +1,6 @@
 import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -16,7 +15,6 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
 
 @Component({
   imports: [
-    CommonModule,
     FormsModule,
     GfValueComponent,
     MatButtonModule,

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -47,10 +47,7 @@
       </div>
     </div>
   } @else {
-    <div
+    <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMin">
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
-    >
       <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Min</ng-container>:
         <gf-value
@@ -85,10 +82,7 @@
         />
       </div>
     </div>
-    <div
+    <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMax">
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
-    >
       <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Max</ng-container>:
         <gf-value

apps/client/src/app/components/rule/rule.component.html

@@ -14,7 +14,7 @@
     } @else {
       <div
         class="align-items-center d-flex icon-container mr-2 px-2"
-        [ngClass]="{
+        [class]="{
           okay: rule?.value === true,
           warn: rule?.value === false
         }"

apps/client/src/app/components/rule/rule.component.ts

@@ -5,7 +5,6 @@ import {
   XRayRulesSettings
 } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -37,13 +36,7 @@ import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-setti
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
+  imports: [IonIcon, MatButtonModule, MatMenuModule, NgxSkeletonLoaderModule],
-    CommonModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    NgxSkeletonLoaderModule
-  ],
   selector: 'gf-rule',
   styleUrls: ['./rule.component.scss'],
   templateUrl: './rule.component.html'

apps/client/src/app/pages/about/overview/about-overview-page.component.ts

@@ -4,7 +4,6 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -26,7 +25,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
-  imports: [CommonModule, IonIcon, MatButtonModule, RouterModule],
+  imports: [IonIcon, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-about-overview-page',
   styleUrls: ['./about-overview-page.scss'],

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -178,7 +178,7 @@
   <div class="mb-5 row">
     <div
       class="col-md-6 col-xs-12 my-2"
-      [ngClass]="{ 'offset-md-3': hasPermissionForSubscription === false }"
+      [class.offset-md-3]="hasPermissionForSubscription === false"
     >
       <a
         class="py-4 w-100"

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts

@@ -4,7 +4,7 @@ import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { CommonModule, NgClass } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import {
   AbstractControl,
@@ -43,7 +43,6 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    NgClass,
     ReactiveFormsModule
   ],
   selector: 'gf-create-or-update-account-dialog',

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -43,7 +43,7 @@
         }}</span>
       </mat-form-field>
     </div>
-    <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
+    <div [class.d-none]="platforms?.length < 1">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
         <input

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -8,7 +8,6 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
-import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -25,7 +24,6 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 @Component({
   host: { class: 'page' },
   imports: [
-    CommonModule,
     GfCarouselComponent,
     GfLogoCarouselComponent,
     GfLogoComponent,

apps/client/src/app/pages/landing/landing-page.html

@@ -54,7 +54,7 @@
     <div class="row mb-5">
       <div
         class="col-md-4 d-flex my-1"
-        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
+        [class.justify-content-center]="deviceType !== 'mobile'"
       >
         <a
           class="d-block"
@@ -72,7 +72,7 @@
       </div>
       <div
         class="col-md-4 d-flex my-1"
-        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
+        [class.justify-content-center]="deviceType !== 'mobile'"
       >
         <a
           class="d-block"
@@ -90,7 +90,7 @@
       </div>
       <div
         class="col-md-4 d-flex my-1"
-        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
+        [class.justify-content-center]="deviceType !== 'mobile'"
       >
         <a
           class="d-block"

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -16,7 +16,6 @@ import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplet
 import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -70,7 +69,6 @@ import { ActivityType } from './types/activity-type.type';
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
-    NgClass,
     ReactiveFormsModule
   ],
   selector: 'gf-create-or-update-activity-dialog',

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -76,11 +76,12 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div [ngClass]="{ 'mb-3': mode === 'update' }">
+    <div [class.mb-3]="mode === 'update'">
       <mat-form-field
         appearance="outline"
         class="w-100"
-        [ngClass]="{ 'mb-1 without-hint': mode === 'create' }"
+        [class.mb-1]="mode === 'create'"
+        [class.without-hint]="mode === 'create'"
       >
         <mat-label i18n>Account</mat-label>
         <mat-select formControlName="accountId">
@@ -103,18 +104,16 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div class="mb-3" [ngClass]="{ 'd-none': mode === 'update' }">
+    <div class="mb-3" [class.d-none]="mode === 'update'">
       <mat-checkbox color="primary" formControlName="updateAccountBalance" i18n
         >Update Cash Balance</mat-checkbox
       >
     </div>
     <div
       class="mb-3"
-      [ngClass]="{
+      [class.d-none]="
-        'd-none': !activityForm
+        !activityForm.get('searchSymbol')?.hasValidator(Validators.required)
-          .get('searchSymbol')
+      "
-          ?.hasValidator(Validators.required)
-      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name, symbol or ISIN</mat-label>
@@ -127,9 +126,9 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{
+      [class.d-none]="
-        'd-none': !activityForm.get('name')?.hasValidator(Validators.required)
+        !activityForm.get('name')?.hasValidator(Validators.required)
-      }"
+      "
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
@@ -173,13 +172,12 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{
+      [class.d-none]="
-        'd-none':
+        activityForm.get('type')?.value === 'FEE' ||
-          activityForm.get('type')?.value === 'FEE' ||
+        activityForm.get('type')?.value === 'INTEREST' ||
-          activityForm.get('type')?.value === 'INTEREST' ||
+        activityForm.get('type')?.value === 'ITEM' ||
-          activityForm.get('type')?.value === 'ITEM' ||
+        activityForm.get('type')?.value === 'LIABILITY'
-          activityForm.get('type')?.value === 'LIABILITY'
+      "
-      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
@@ -188,7 +186,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.get('type')?.value === 'FEE' }"
+      [class.d-none]="activityForm.get('type')?.value === 'FEE'"
     >
       <div class="align-items-start d-flex">
         <mat-form-field appearance="outline" class="w-100">
@@ -215,7 +213,7 @@
           <div
             class="ml-2"
             matTextSuffix
-            [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
+            [class.d-none]="!activityForm.get('currency')?.value"
           >
             <mat-select formControlName="currencyOfUnitPrice">
               @for (currency of currencies; track currency) {
@@ -247,12 +245,11 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{
+      [class.d-none]="
-        'd-none':
+        activityForm.get('type')?.value === 'INTEREST' ||
-          activityForm.get('type')?.value === 'INTEREST' ||
+        activityForm.get('type')?.value === 'ITEM' ||
-          activityForm.get('type')?.value === 'ITEM' ||
+        activityForm.get('type')?.value === 'LIABILITY'
-          activityForm.get('type')?.value === 'LIABILITY'
+      "
-      }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>
@@ -260,7 +257,7 @@
         <div
           class="ml-2"
           matTextSuffix
-          [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
+          [class.d-none]="!activityForm.get('currency')?.value"
         >
           {{ activityForm.get('currencyOfUnitPrice')?.value }}
         </div>
@@ -280,7 +277,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
+      [class.d-none]="activityForm.get('type')?.value !== 'ITEM'"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Asset Class</mat-label>
@@ -299,7 +296,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
+      [class.d-none]="activityForm.get('type')?.value !== 'ITEM'"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Asset Sub Class</mat-label>

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -21,7 +21,6 @@ import { GfTopHoldingsComponent } from '@ghostfolio/ui/top-holdings';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
-import { NgClass } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -51,8 +50,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
     GfValueComponent,
     GfWorldMapChartComponent,
     MatCardModule,
-    MatProgressBarModule,
+    MatProgressBarModule
-    NgClass
   ],
   selector: 'gf-allocations-page',
   styleUrls: ['./allocations-page.scss'],

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -319,9 +319,7 @@
     </div>
     <div
       class="col-md-12"
-      [ngClass]="{
+      [class.d-none]="!user?.settings?.isExperimentalFeatures"
-        'd-none': !user?.settings?.isExperimentalFeatures
-      }"
     >
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -62,7 +62,7 @@
         />
       </div>
     } @else {
-      <div [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }">
+      <div [class.text-muted]="user?.subscription?.type === 'Basic'">
         <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw</ng-container

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html

@@ -30,7 +30,7 @@
         } @else {
           <div
             class="align-items-center d-flex icon-container mr-2 px-2"
-            [ngClass]="{
+            [class]="{
               okay:
                 statistics?.rulesFulfilledCount ===
                 statistics?.rulesActiveCount,
@@ -60,10 +60,7 @@
         }
       </div>
       @for (category of categories; track category.key) {
-        <div
+        <div class="mb-4" [class.d-none]="category.rules?.length === 0">
-          class="mb-4"
-          [ngClass]="{ 'd-none': category.rules?.length === 0 }"
-        >
           <h4 class="align-items-center d-flex m-0">
             <span>{{ category.name }}</span>
             @if (user?.subscription?.type === 'Basic') {

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -12,7 +12,6 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { NgClass } from '@angular/common';
 import { ChangeDetectorRef, Component, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -29,7 +28,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
     GfPremiumIndicatorComponent,
     GfRulesComponent,
     IonIcon,
-    NgClass,
     NgxSkeletonLoaderModule
   ],
   selector: 'gf-x-ray-page',

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -7,7 +7,6 @@ import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -35,7 +34,6 @@ import { catchError } from 'rxjs/operators';
 @Component({
   host: { class: 'page' },
   imports: [
-    CommonModule,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/pages/pricing/pricing-page.html

@@ -103,7 +103,7 @@
           <mat-card
             appearance="outlined"
             class="h-100"
-            [ngClass]="{ active: user?.subscription?.type === 'Basic' }"
+            [class.active]="user?.subscription?.type === 'Basic'"
           >
             <mat-card-content class="d-flex flex-column h-100">
               <div class="flex-grow-1">
@@ -169,7 +169,7 @@
           <mat-card
             appearance="outlined"
             class="h-100"
-            [ngClass]="{ active: user?.subscription?.type === 'Premium' }"
+            [class.active]="user?.subscription?.type === 'Premium'"
           >
             <mat-card-content class="d-flex flex-column h-100">
               @if (label) {

apps/client/src/app/pages/public/public-page.component.ts

@@ -14,7 +14,6 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
-import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   ChangeDetectorRef,
@@ -40,7 +39,6 @@ import { catchError } from 'rxjs/operators';
 @Component({
   host: { class: 'page' },
   imports: [
-    CommonModule,
     GfActivitiesTableComponent,
     GfHoldingsTableComponent,
     GfPortfolioProportionChartComponent,

apps/client/src/app/pages/public/public-page.html

@@ -202,7 +202,7 @@
       </div>
     </div>
   }
-  <div class="row" [ngClass]="{ 'd-none': hasPermissionForSubscription }">
+  <div class="row" [class.d-none]="hasPermissionForSubscription">
     <div class="col-md-12">
       <mat-card appearance="outlined">
         <mat-card-header class="overflow-hidden w-100">

libs/ui/src/lib/accounts-table/accounts-table.component.html

@@ -340,15 +340,13 @@
     <tr
       *matRowDef="let row; columns: displayedColumns()"
       mat-row
-      [ngClass]="{
+      [class.cursor-pointer]="hasPermissionToOpenDetails()"
-        'cursor-pointer': hasPermissionToOpenDetails()
-      }"
       (click)="onOpenAccountDetailDialog(row.id)"
     ></tr>
     <tr
       *matFooterRowDef="displayedColumns()"
       mat-footer-row
-      [ngClass]="{ 'd-none': isLoading() || !showFooter() }"
+      [class.d-none]="isLoading() || !showFooter()"
     ></tr>
   </table>
 </div>

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -4,7 +4,6 @@ import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -37,7 +36,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfEntityLogoComponent,
     GfValueComponent,
     IonIcon,

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -516,9 +516,7 @@
     <tr
       *matRowDef="let row; columns: displayedColumns()"
       mat-row
-      [ngClass]="{
+      [class.cursor-pointer]="canClickActivity(row)"
-        'cursor-pointer': canClickActivity(row)
-      }"
       (click)="onClickActivity(row)"
     ></tr>
   </table>
@@ -536,11 +534,9 @@
 }
 
 <mat-paginator
+  [class.d-none]="(isLoading() && !totalItems) || totalItems <= pageSize"
   [hidePageSize]="true"
   [length]="totalItems"
-  [ngClass]="{
-    'd-none': (isLoading() && !totalItems) || totalItems <= pageSize
-  }"
   [pageIndex]="pageIndex"
   [pageSize]="pageSize"
   [showFirstLastButtons]="true"

libs/ui/src/lib/activity-type/activity-type.component.html

@@ -1,6 +1,6 @@
 <div
   class="d-inline-flex p-1 activity-type-badge"
-  [ngClass]="{
+  [class]="{
     buy: activityType === 'BUY',
     dividend: activityType === 'DIVIDEND',
     fee: activityType === 'FEE',

libs/ui/src/lib/activity-type/activity-type.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -22,7 +21,7 @@ import { translate } from '../i18n';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, IonIcon],
+  imports: [IonIcon],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activity-type',
   styleUrls: ['./activity-type.component.scss'],

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

@@ -122,14 +122,14 @@
         @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
             class="d-inline-block justify-content-end"
-            [isPercent]="true"
+            [class]="{
-            [locale]="locale()"
-            [ngClass]="{
               'text-danger':
                 element?.performances?.allTimeHigh?.performancePercent < 0,
               'text-success':
                 element?.performances?.allTimeHigh?.performancePercent === 0
             }"
+            [isPercent]="true"
+            [locale]="locale()"
             [value]="element?.performances?.allTimeHigh?.performancePercent"
           />
         }

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

@@ -11,7 +11,6 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -46,7 +45,6 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfTrendIndicatorComponent,
     GfValueComponent,
     IonIcon,

libs/ui/src/lib/dialog-header/dialog-header.component.html

@@ -1,7 +1,7 @@
 <div class="d-flex" mat-dialog-title>
   <span
     class="flex-grow-1 text-truncate"
-    [ngClass]="{ 'text-center': position === 'center' }"
+    [class.text-center]="position === 'center'"
     >{{ title }}</span
   >
   @if (deviceType !== 'mobile') {

libs/ui/src/lib/dialog-header/dialog-header.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,7 +14,7 @@ import { close } from 'ionicons/icons';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'justify-content-center' },
-  imports: [CommonModule, IonIcon, MatButtonModule, MatDialogModule],
+  imports: [IonIcon, MatButtonModule, MatDialogModule],
   selector: 'gf-dialog-header',
   styleUrls: ['./dialog-header.component.scss'],
   templateUrl: './dialog-header.component.html'

libs/ui/src/lib/entity-logo/entity-logo.component.html

@@ -1,7 +1,7 @@
 @if (src) {
   <img
     onerror="this.style.display = 'none'"
-    [ngClass]="{ large: size === 'large' }"
+    [class.large]="size === 'large'"
     [src]="src"
     [title]="tooltip ? tooltip : ''"
   />

libs/ui/src/lib/entity-logo/entity-logo.component.ts

@@ -1,6 +1,5 @@
 import { EntityLogoImageSourceService } from '@ghostfolio/ui/entity-logo/entity-logo-image-source.service';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -12,7 +11,6 @@ import { DataSource } from '@prisma/client';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-entity-logo',
   styleUrls: ['./entity-logo.component.scss'],

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

@@ -6,7 +6,7 @@
         @for (day of days; track day) {
           <div
             class="day"
-            [ngClass]="{
+            [class]="{
               'cursor-pointer valid': isDateOfInterest(
                 `${itemByMonth.key}-${formatDay(day)}`
               ),

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

@@ -1,5 +1,5 @@
 <span class="align-items-center d-flex"
-  ><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span>
+  ><span class="d-inline-block logo" [class.mr-1]="showLabel"></span>
   @if (showLabel) {
     <span class="label">{{ label ?? 'Ghostfolio' }}</span>
   }

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -9,7 +8,6 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-logo',
   styleUrls: ['./logo.component.scss'],

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -1,5 +1,5 @@
 <div class="card-wrapper position-relative" [class.hover-3d]="hover3d">
-  <div class="card-container" [ngClass]="{ premium: name === 'Premium' }">
+  <div class="card-container" [class.premium]="name === 'Premium'">
     <a
       class="card-item d-flex flex-column justify-content-between p-4"
       [routerLink]="routerLinkPricing"
@@ -12,7 +12,7 @@
       <div class="d-flex justify-content-end">
         <gf-logo
           size="large"
-          [ngClass]="{ 'text-muted': name === 'Basic' }"
+          [class.text-muted]="name === 'Basic'"
           [showLabel]="false"
         />
       </div>

libs/ui/src/lib/membership-card/membership-card.component.ts

@@ -1,6 +1,5 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -19,13 +18,7 @@ import { GfLogoComponent } from '../logo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
+  imports: [GfLogoComponent, IonIcon, MatButtonModule, RouterModule],
-    CommonModule,
-    GfLogoComponent,
-    IonIcon,
-    MatButtonModule,
-    RouterModule
-  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-membership-card',
   styleUrls: ['./membership-card.component.scss'],

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

@@ -6,12 +6,12 @@
   @for (option of options(); track option) {
     <mat-radio-button
       class="d-inline-flex"
-      [disabled]="isLoading()"
+      [class]="{
-      [ngClass]="{
         'cursor-default': option.value === optionFormControl.value,
         'cursor-pointer':
           !isLoading() && option.value !== optionFormControl.value
       }"
+      [disabled]="isLoading()"
       [value]="option.value"
       >{{ option.label }}</mat-radio-button
     >

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

@@ -1,6 +1,5 @@
 import { ToggleOption } from '@ghostfolio/common/interfaces';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,7 +12,7 @@ import { MatRadioModule } from '@angular/material/radio';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MatRadioModule, ReactiveFormsModule],
+  imports: [MatRadioModule, ReactiveFormsModule],
   selector: 'gf-toggle',
   styleUrls: ['./toggle.component.scss'],
   templateUrl: './toggle.component.html'

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -120,7 +120,7 @@
               <tr
                 *matRowDef="let row; columns: displayedColumns"
                 mat-row
-                [ngClass]="{ 'cursor-pointer': row.position }"
+                [class.cursor-pointer]="row.position"
                 (click)="onClickHolding(row.position)"
               ></tr>
               <tr
@@ -138,7 +138,7 @@
     <tr
       *matRowDef="let element; columns: displayedColumns"
       mat-row
-      [ngClass]="{
+      [class]="{
         'cursor-pointer': element.parents?.length > 0,
         expanded: element.expand ?? false
       }"
@@ -150,7 +150,7 @@
       *matRowDef="let row; columns: ['expandedDetail']"
       class="holding-detail"
       mat-row
-      [ngClass]="{ 'd-none': !row.parents?.length }"
+      [class.d-none]="!row.parents?.length"
     ></tr>
   </table>
 </div>

libs/ui/src/lib/top-holdings/top-holdings.component.ts

@@ -12,7 +12,6 @@ import {
   transition,
   trigger
 } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -44,7 +43,6 @@ import { GfValueComponent } from '../value/value.component';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfSymbolPipe,
     GfValueComponent,
     MatButtonModule,

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

@@ -16,7 +16,7 @@
     <ion-icon
       class="text-danger"
       name="arrow-down-circle-outline"
-      [ngClass]="{ 'rotate-45-down': value > -0.01 }"
+      [class.rotate-45-down]="value > -0.01"
       [size]="size"
     />
   } @else if (value > -0.0005 && value < 0.0005) {
@@ -29,7 +29,7 @@
     <ion-icon
       class="text-success"
       name="arrow-up-circle-outline"
-      [ngClass]="{ 'rotate-45-up': value < 0.01 }"
+      [class.rotate-45-up]="value < 0.01"
       [size]="size"
     />
   }

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

@@ -27,7 +27,7 @@
   @if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
-      [ngClass]="position === 'end' ? 'justify-content-end' : ''"
+      [class.justify-content-end]="position === 'end'"
     >
       @if (isNumber || value === null) {
         @if (colorizeSign && !useAbsoluteValue) {
@@ -40,7 +40,7 @@
         }
         <div
           class="mb-0 value"
-          [ngClass]="{
+          [class]="{
             'font-weight-bold h2': size === 'large',
             h4: size === 'medium'
           }"
@@ -60,7 +60,7 @@
       @if (isString) {
         <div
           class="mb-0 text-truncate value"
-          [ngClass]="{
+          [class]="{
             'font-weight-bold h2': size === 'large',
             h4: size === 'medium'
           }"