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

* Migrate components from NgClass to class bindings * Update changelog
1 month ago · 3602562aac
parent 5113b22123
commit 3602562aac
61 changed files with 141 additions and 226 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
+++ b/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,
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/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>
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.html
+++ b/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
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/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)"
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/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]="{
-                    'text-line-through': element.role === 'INACTIVE'
-                  }"
+                  [class.text-line-through]="element.role === 'INACTIVE'"
                  >{{ element.id }}</span
                >
                <span
                  class="d-inline-block d-sm-none text-monospace"
-                  [ngClass]="{
-                    'text-line-through': element.role === 'INACTIVE'
-                  }"
+                  [class.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)"
--- a/apps/client/src/app/components/header/header.component.html
+++ b/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]="{
-              'font-weight-bold':
-                currentRoute === internalRoutes.home.path ||
-                currentRoute === internalRoutes.zen.path
-            }"
+            [class.font-weight-bold]="
+              currentRoute === internalRoutes.home.path ||
+              currentRoute === internalRoutes.zen.path
+            "
            [routerLink]="['/']"
            >Overview</a
          >
@ -251,9 +250,9 @@
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
-            [ngClass]="{
-              'font-weight-bold': currentRoute === internalRoutes.portfolio.path
-            }"
+            [class.font-weight-bold]="
+              currentRoute === internalRoutes.portfolio.path
+            "
            [routerLink]="routerLinkPortfolio"
            >Portfolio</a
          >
@ -261,18 +260,18 @@
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
-            [ngClass]="{
-              'font-weight-bold': currentRoute === internalRoutes.accounts.path
-            }"
+            [class.font-weight-bold]="
+              currentRoute === internalRoutes.accounts.path
+            "
            [routerLink]="routerLinkAccounts"
            >Accounts</a
          >
          <a
            i18n
            mat-menu-item
-            [ngClass]="{
-              'font-weight-bold': currentRoute === internalRoutes.account.path
-            }"
+            [class.font-weight-bold]="
+              currentRoute === internalRoutes.account.path
+            "
            [routerLink]="routerLinkAccount"
            >My Ghostfolio</a
          >
@ -281,10 +280,9 @@
              class="d-flex d-sm-none"
              i18n
              mat-menu-item
-              [ngClass]="{
-                'font-weight-bold':
-                  currentRoute === internalRoutes.adminControl.path
-              }"
+              [class.font-weight-bold]="
+                currentRoute === internalRoutes.adminControl.path
+              "
              [routerLink]="routerLinkAdminControl"
              >Admin Control</a
            >
@ -294,9 +292,7 @@
            class="d-flex d-sm-none"
            i18n
            mat-menu-item
-            [ngClass]="{
-              'font-weight-bold': currentRoute === routeResources
-            }"
+            [class.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
            }"
--- a/apps/client/src/app/components/header/header.component.ts
+++ b/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,
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts
+++ b/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,
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/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"
--- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts
+++ b/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,
--- a/apps/client/src/app/components/home-holdings/home-holdings.html
+++ b/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"
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/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,
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/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
-            class="mb-2"
-            [ngClass]="{ 'text-muted': user?.accounts?.length > 1 }"
-          >
+          <li class="mb-2" [class.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"
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/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"
-      [ngClass]="{
+      [class]="{
        'text-danger': isAllTimeLow,
        'text-success': isAllTimeHigh
      }"
+      [hidden]="isLoading"
    >
      <span #value id="value"></span>
    </div>
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
+++ b/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'
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/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]="{
-        'cursor-pointer':
-          hasPermissionToUpdateUserSettings &&
-          !user?.settings?.isRestrictedView &&
-          user?.subscription?.type !== 'Basic'
-      }"
+      [class.cursor-pointer]="
+        hasPermissionToUpdateUserSettings &&
+        !user?.settings?.isRestrictedView &&
+        user?.subscription?.type !== 'Basic'
+      "
      (click)="
        hasPermissionToUpdateUserSettings &&
          !user?.settings?.isRestrictedView &&
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/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'
--- 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,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,
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
@ -47,10 +47,7 @@
      </div>
    </div>
  } @else {
-    <div
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
-    >
+    <div class="w-100" [class.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
-      class="w-100"
-      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
-    >
+    <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMax">
      <h6 class="d-flex mb-0">
        <ng-container i18n>Threshold Max</ng-container>:
        <gf-value
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/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
        }"
--- a/apps/client/src/app/components/rule/rule.component.ts
+++ b/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: [
-    CommonModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    NgxSkeletonLoaderModule
-  ],
+  imports: [IonIcon, MatButtonModule, MatMenuModule, NgxSkeletonLoaderModule],
  selector: 'gf-rule',
  styleUrls: ['./rule.component.scss'],
  templateUrl: './rule.component.html'
--- a/apps/client/src/app/pages/about/overview/about-overview-page.component.ts
+++ b/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'],
--- a/apps/client/src/app/pages/about/overview/about-overview-page.html
+++ b/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"
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
+++ b/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',
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
+++ b/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
--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/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,
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/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"
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
+++ b/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',
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/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]="{
-        'd-none': !activityForm
-          .get('searchSymbol')
-          ?.hasValidator(Validators.required)
-      }"
+      [class.d-none]="
+        !activityForm.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]="{
-        'd-none': !activityForm.get('name')?.hasValidator(Validators.required)
-      }"
+      [class.d-none]="
+        !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]="{
-        'd-none':
-          activityForm.get('type')?.value === 'FEE' ||
-          activityForm.get('type')?.value === 'INTEREST' ||
-          activityForm.get('type')?.value === 'ITEM' ||
-          activityForm.get('type')?.value === 'LIABILITY'
-      }"
+      [class.d-none]="
+        activityForm.get('type')?.value === 'FEE' ||
+        activityForm.get('type')?.value === 'INTEREST' ||
+        activityForm.get('type')?.value === 'ITEM' ||
+        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]="{
-        'd-none':
-          activityForm.get('type')?.value === 'INTEREST' ||
-          activityForm.get('type')?.value === 'ITEM' ||
-          activityForm.get('type')?.value === 'LIABILITY'
-      }"
+      [class.d-none]="
+        activityForm.get('type')?.value === 'INTEREST' ||
+        activityForm.get('type')?.value === 'ITEM' ||
+        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>
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/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,
-    NgClass
+    MatProgressBarModule
  ],
  selector: 'gf-allocations-page',
  styleUrls: ['./allocations-page.scss'],
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@ -319,9 +319,7 @@
    </div>
    <div
      class="col-md-12"
-      [ngClass]="{
-        'd-none': !user?.settings?.isExperimentalFeatures
-      }"
+      [class.d-none]="!user?.settings?.isExperimentalFeatures"
    >
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/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
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
+++ b/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
-          class="mb-4"
-          [ngClass]="{ 'd-none': category.rules?.length === 0 }"
-        >
+        <div class="mb-4" [class.d-none]="category.rules?.length === 0">
          <h4 class="align-items-center d-flex m-0">
            <span>{{ category.name }}</span>
            @if (user?.subscription?.type === 'Basic') {
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
+++ b/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',
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/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,
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/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) {
--- a/apps/client/src/app/pages/public/public-page.component.ts
+++ b/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,
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/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">
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@ -340,15 +340,13 @@
    <tr
      *matRowDef="let row; columns: displayedColumns()"
      mat-row
-      [ngClass]="{
-        'cursor-pointer': hasPermissionToOpenDetails()
-      }"
+      [class.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>
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/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,
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@ -516,9 +516,7 @@
    <tr
      *matRowDef="let row; columns: displayedColumns()"
      mat-row
-      [ngClass]="{
-        'cursor-pointer': canClickActivity(row)
-      }"
+      [class.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"
--- a/libs/ui/src/lib/activity-type/activity-type.component.html
+++ b/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',
--- a/libs/ui/src/lib/activity-type/activity-type.component.ts
+++ b/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'],
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/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"
-            [locale]="locale()"
-            [ngClass]="{
+            [class]="{
              'text-danger':
                element?.performances?.allTimeHigh?.performancePercent < 0,
              'text-success':
                element?.performances?.allTimeHigh?.performancePercent === 0
            }"
+            [isPercent]="true"
+            [locale]="locale()"
            [value]="element?.performances?.allTimeHigh?.performancePercent"
          />
        }
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/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,
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.html
+++ b/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') {
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.ts
+++ b/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'
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.html
+++ b/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 : ''"
  />
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.ts
+++ b/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'],
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
+++ b/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)}`
              ),
--- a/libs/ui/src/lib/logo/logo.component.html
+++ b/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>
  }
--- a/libs/ui/src/lib/logo/logo.component.ts
+++ b/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'],
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/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>
--- a/libs/ui/src/lib/membership-card/membership-card.component.ts
+++ b/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: [
-    CommonModule,
-    GfLogoComponent,
-    IonIcon,
-    MatButtonModule,
-    RouterModule
-  ],
+  imports: [GfLogoComponent, IonIcon, MatButtonModule, RouterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: 'gf-membership-card',
  styleUrls: ['./membership-card.component.scss'],
--- a/libs/ui/src/lib/toggle/toggle.component.html
+++ b/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()"
-      [ngClass]="{
+      [class]="{
        'cursor-default': option.value === optionFormControl.value,
        'cursor-pointer':
          !isLoading() && option.value !== optionFormControl.value
      }"
+      [disabled]="isLoading()"
      [value]="option.value"
      >{{ option.label }}</mat-radio-button
    >
--- a/libs/ui/src/lib/toggle/toggle.component.ts
+++ b/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'
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/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>
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.ts
+++ b/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,
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
+++ b/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"
    />
  }
--- a/libs/ui/src/lib/value/value.component.html
+++ b/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'
          }"