Task/set change detection strategy to OnPush in various page components (part II) (#7329)

* Set change detection strategy to OnPush

* Update changelog

CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Set the change detection strategy to `OnPush` in the about pages
+- Set the change detection strategy to `OnPush` in the accounts page
+- Set the change detection strategy to `OnPush` in the demo page
+- Set the change detection strategy to `OnPush` in the features page
+- Set the change detection strategy to `OnPush` in the Frequently Asked Questions (FAQ) pages
+- Set the change detection strategy to `OnPush` in the landing page
+- Set the change detection strategy to `OnPush` in the markets page
+- Set the change detection strategy to `OnPush` in the _Open Startup_ (`/open`) page
+- Set the change detection strategy to `OnPush` in the pricing page
+- Set the change detection strategy to `OnPush` in the public page
+- Set the change detection strategy to `OnPush` in the registration page
+- Set the change detection strategy to `OnPush` in the resources pages
+
 ## 3.26.0 - 2026-07-14
 
 ### Added

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

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownModule, NgxSkeletonLoaderModule],
   selector: 'gf-changelog-page',
   styleUrls: ['./changelog-page.scss'],

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

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownModule],
   selector: 'gf-license-page',
   styleUrls: ['./license-page.scss'],

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -8,6 +8,7 @@ import { arrowForwardOutline } from 'ionicons/icons';
 const ossFriends = require('../../../../assets/oss-friends.json');
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [IonIcon, MatButtonModule, MatCardModule],
   selector: 'gf-oss-friends-page',
   styleUrls: ['./oss-friends-page.scss'],

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

@@ -5,6 +5,7 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -25,6 +26,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [IonIcon, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-about-overview-page',
@@ -68,9 +70,9 @@ export class GfAboutOverviewPageComponent implements OnInit {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
   }
 }

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

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownModule],
   selector: 'gf-privacy-policy-page',
   styleUrls: ['./privacy-policy-page.scss'],

apps/client/src/app/pages/about/terms-of-service/terms-of-service-page.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MarkdownModule],
   selector: 'gf-terms-of-service-page',
   styleUrls: ['./terms-of-service-page.scss'],

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

@@ -15,6 +15,7 @@ import { NotificationService } from '@ghostfolio/ui/notifications';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -36,6 +37,7 @@ import { TransferBalanceDialogParams } from './transfer-balance/interfaces/inter
 import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-balance-dialog.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfAccountsTableComponent, GfFabComponent, RouterModule],
   selector: 'gf-accounts-page',
@@ -120,9 +122,9 @@ export class GfAccountsPageComponent implements OnInit {
             this.user.permissions,
             permissions.updateAccount
           );
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
 
     this.fetchAccounts();

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

@@ -22,7 +22,13 @@ import {
   HttpHeaders,
   HttpParams
 } from '@angular/common/http';
-import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  OnInit
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatCardModule } from '@angular/material/card';
 import { format, startOfYear } from 'date-fns';
@@ -33,6 +39,7 @@ import { catchError, map, Observable, of, OperatorFunction } from 'rxjs';
 import { FetchFailure, FetchResult } from './interfaces/interfaces';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [
     CommonModule,

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

@@ -4,11 +4,17 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
-import { Component, DestroyRef, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  OnInit
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-auth-page',
   styleUrls: ['./auth-page.scss'],
   templateUrl: './auth-page.html'

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

@@ -3,10 +3,11 @@ import { InfoItem } from '@ghostfolio/common/interfaces';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   selector: 'gf-demo-page',
   standalone: true,

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

@@ -4,6 +4,7 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -14,6 +15,7 @@ import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatCardModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -38,9 +40,9 @@ export class GfFaqOverviewPageComponent {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
   }
 }

apps/client/src/app/pages/faq/saas/saas-page.component.ts

@@ -4,6 +4,7 @@ import { internalRoutes, publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -14,6 +15,7 @@ import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatCardModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -42,9 +44,9 @@ export class GfSaasPageComponent {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
   }
 }

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.component.ts

@@ -1,11 +1,16 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatCardModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

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

@@ -5,13 +5,19 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { ChangeDetectorRef, Component, DestroyRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [
     GfPremiumIndicatorComponent,
@@ -46,9 +52,9 @@ export class GfFeaturesPageComponent {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
 
     this.hasPermissionForSubscription = hasPermission(

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

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   selector: 'gf-i18n-page',
   standalone: true,

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

@@ -8,7 +8,7 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
@@ -22,6 +22,7 @@ import {
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [
     GfCarouselComponent,

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

@@ -1,8 +1,9 @@
 import { GfHomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfHomeMarketComponent],
   selector: 'gf-markets-page',

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

@@ -4,6 +4,7 @@ import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -14,6 +15,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfValueComponent, MatCardModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -42,9 +44,9 @@ export class GfOpenPageComponent implements OnInit {
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
   }
 }

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

@@ -8,6 +8,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
@@ -32,6 +33,7 @@ import { EMPTY } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [
     GfPremiumIndicatorComponent,
@@ -123,9 +125,9 @@ export class GfPricingPageComponent implements OnInit {
           this.label = this.user?.subscription?.offer?.label;
           this.price = this.user?.subscription?.offer?.price;
           this.priceId = this.user?.subscription?.offer?.priceId;
+        }
 
         this.changeDetectorRef.markForCheck();
-        }
       });
   }
 

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

@@ -17,6 +17,7 @@ import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
 import { HttpErrorResponse } from '@angular/common/http';
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -38,6 +39,7 @@ import { EMPTY } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [
     GfActivitiesTableComponent,

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

@@ -6,6 +6,7 @@ import { GfLogoComponent } from '@ghostfolio/ui/logo';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
+  ChangeDetectionStrategy,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   DestroyRef,
@@ -21,6 +22,7 @@ import { UserAccountRegistrationDialogParams } from './user-account-registration
 import { GfUserAccountRegistrationDialogComponent } from './user-account-registration-dialog/user-account-registration-dialog.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfLogoComponent, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts

@@ -3,10 +3,11 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterModule],
   selector: 'gf-resources-glossary',
   styleUrls: ['./resources-glossary.component.scss'],

apps/client/src/app/pages/resources/guides/resources-guides.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterModule],
   selector: 'gf-resources-guides',
   styleUrls: ['./resources-guides.component.scss'],

apps/client/src/app/pages/resources/markets/resources-markets.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-resources-markets',
   styleUrls: ['./resources-markets.component.scss'],
   templateUrl: './resources-markets.component.html'

apps/client/src/app/pages/resources/overview/resources-overview.component.ts

@@ -1,9 +1,10 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterModule],
   selector: 'gf-resources-overview',
   styleUrls: ['./resources-overview.component.scss'],

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

@@ -1,7 +1,7 @@
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -9,6 +9,7 @@ import { addIcons } from 'ionicons';
 import { chevronForwardOutline } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [IonIcon, MatCardModule, RouterModule],
   selector: 'gf-personal-finance-tools-page',

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

@@ -2,6 +2,7 @@ import { TokenStorageService } from '@ghostfolio/client/services/token-storage.s
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -13,6 +14,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Router } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, MatProgressSpinnerModule],
   selector: 'gf-webauthn-page',
@@ -56,7 +58,9 @@ export class GfWebauthnPageComponent implements OnInit {
         },
         (error) => {
           console.error(error);
+
           this.hasError = true;
+
           this.changeDetectorRef.markForCheck();
         }
       );