Task/set change detection strategy to OnPush in various page components (#7289)

* Set change detection strategy to OnPush

* Update changelog

CHANGELOG.md

@@ -10,8 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Migrated the deprecated `@nx/webpack:webpack` executor to `@nx/webpack/plugin`
+- Set the change detection strategy to `OnPush` in the about page
+- Set the change detection strategy to `OnPush` in the admin control panel
 - Set the change detection strategy to `OnPush` in the blog page components
+- Set the change detection strategy to `OnPush` in the Frequently Asked Questions (FAQ) page
+- Set the change detection strategy to `OnPush` in the home page
 - Set the change detection strategy to `OnPush` in the markets overview
+- Set the change detection strategy to `OnPush` in the resources page
+- Set the change detection strategy to `OnPush` in the user account page
+- Set the change detection strategy to `OnPush` in the _Zen Mode_
 - Improved the language localization for Chinese (`zh`)
 
 ## 3.22.0 - 2026-07-08

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

@@ -8,7 +8,12 @@ import {
 } from '@ghostfolio/ui/page-tabs';
 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 { addIcons } from 'ionicons';
 import {
@@ -21,6 +26,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-about-page',
@@ -83,8 +89,6 @@ export class AboutPageComponent {
           });
 
           this.user = state.user;
-
-          this.changeDetectorRef.markForCheck();
         }
 
         this.tabs.push({
@@ -92,6 +96,8 @@ export class AboutPageComponent {
           label: publicRoutes.about.subRoutes.ossFriends.title,
           routerLink: publicRoutes.about.subRoutes.ossFriends.routerLink
         });
+
+        this.changeDetectorRef.markForCheck();
       });
 
     addIcons({

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

@@ -12,7 +12,12 @@ import {
   TabConfiguration
 } from '@ghostfolio/ui/page-tabs';
 
-import { Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { addIcons } from 'ionicons';
 import {
@@ -24,6 +29,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-admin-page',
@@ -35,6 +41,7 @@ export class AdminPageComponent {
 
   private user: User;
 
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly tokenStorageService = inject(TokenStorageService);
   private readonly userService = inject(UserService);
 
@@ -45,6 +52,8 @@ export class AdminPageComponent {
         this.user = state?.user;
 
         this.initializeTabs();
+
+        this.changeDetectorRef.markForCheck();
       });
 
     addIcons({

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

@@ -6,11 +6,12 @@ import {
 } from '@ghostfolio/ui/page-tabs';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { addIcons } from 'ionicons';
 import { cloudyOutline, readerOutline, serverOutline } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-faq-page',

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

@@ -9,6 +9,7 @@ import {
 } from '@ghostfolio/ui/page-tabs';
 
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -25,6 +26,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-home-page',
@@ -85,9 +87,9 @@ export class GfHomePageComponent implements OnInit {
                 : internalRoutes.home.subRoutes.markets.routerLink
             }
           ];
-
-          this.changeDetectorRef.markForCheck();
         }
+
+        this.changeDetectorRef.markForCheck();
       });
 
     addIcons({

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

@@ -4,7 +4,7 @@ import {
   TabConfiguration
 } from '@ghostfolio/ui/page-tabs';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { addIcons } from 'ionicons';
 import {
   bookOutline,
@@ -14,6 +14,7 @@ import {
 } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-resources-page',

apps/client/src/app/pages/user-account/user-account-page.component.ts

@@ -6,12 +6,18 @@ import {
   TabConfiguration
 } from '@ghostfolio/ui/page-tabs';
 
-import { ChangeDetectorRef, Component, DestroyRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { addIcons } from 'ionicons';
 import { diamondOutline, keyOutline, settingsOutline } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-user-account-page',
@@ -52,9 +58,9 @@ export class GfUserAccountPageComponent {
               routerLink: internalRoutes.account.subRoutes.access.routerLink
             }
           ];
-
-          this.changeDetectorRef.markForCheck();
         }
+
+        this.changeDetectorRef.markForCheck();
       });
 
     addIcons({ diamondOutline, keyOutline, settingsOutline });

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

@@ -6,12 +6,18 @@ import {
   TabConfiguration
 } from '@ghostfolio/ui/page-tabs';
 
-import { ChangeDetectorRef, Component, DestroyRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { addIcons } from 'ionicons';
 import { albumsOutline, analyticsOutline } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPageTabsComponent],
   selector: 'gf-zen-page',
@@ -44,9 +50,9 @@ export class GfZenPageComponent {
             }
           ];
           this.user = state.user;
-
-          this.changeDetectorRef.markForCheck();
         }
+
+        this.changeDetectorRef.markForCheck();
       });
 
     addIcons({ albumsOutline, analyticsOutline });