Merge branch 'main' into task/set-change-detection-strategy-to-on-push-in-various-page-components

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -76,7 +76,7 @@
                       <span
                         class="badge badge-pill badge-secondary ml-2 text-uppercase"
                         i18n
-                        >new</span
+                        >popular</span
                       >
                     }
                   </a>

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -3,7 +3,6 @@ import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
@@ -14,7 +13,8 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  DestroyRef
+  DestroyRef,
+  inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -40,29 +40,29 @@ import { catchError } from 'rxjs/operators';
   templateUrl: './user-account-membership.html'
 })
 export class GfUserAccountMembershipComponent {
-  public baseCurrency: string;
+  protected readonly baseCurrency: string;
-  public coupon: number;
+  protected coupon: number | undefined;
-  public couponId: string;
+  protected defaultDateFormat: string;
-  public defaultDateFormat: string;
+  protected durationExtension: StringValue | undefined;
-  public durationExtension: StringValue;
+  protected readonly hasPermissionForSubscription: boolean;
-  public hasPermissionForSubscription: boolean;
+  protected hasPermissionToCreateApiKey: boolean;
-  public hasPermissionToCreateApiKey: boolean;
+  protected hasPermissionToUpdateUserSettings: boolean;
-  public hasPermissionToUpdateUserSettings: boolean;
+  protected price: number;
-  public price: number;
+  protected readonly trySubscriptionMail =
-  public priceId: string;
-  public routerLinkPricing = publicRoutes.pricing.routerLink;
-  public trySubscriptionMail =
     'mailto:hi@ghostfol.io?subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
-  public user: User;
+  protected user: User;
-
+
-  public constructor(
+  private couponId: string | undefined;
-    private changeDetectorRef: ChangeDetectorRef,
+  private priceId: string;
-    private dataService: DataService,
+
-    private destroyRef: DestroyRef,
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
-    private notificationService: NotificationService,
+  private readonly dataService = inject(DataService);
-    private snackBar: MatSnackBar,
+  private readonly destroyRef = inject(DestroyRef);
-    private userService: UserService
+  private readonly notificationService = inject(NotificationService);
-  ) {
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly userService = inject(UserService);
+
+  public constructor() {
     const { baseCurrency, globalPermissions } = this.dataService.fetchInfo();
 
     this.baseCurrency = baseCurrency;
@@ -104,7 +104,7 @@ export class GfUserAccountMembershipComponent {
       });
   }
 
-  public onCheckout() {
+  protected onCheckout() {
     this.dataService
       .createStripeCheckoutSession({
         couponId: this.couponId,
@@ -125,7 +125,7 @@ export class GfUserAccountMembershipComponent {
       });
   }
 
-  public onGenerateApiKey() {
+  protected onGenerateApiKey() {
     this.notificationService.confirm({
       confirmFn: () => {
         this.dataService
@@ -158,7 +158,7 @@ export class GfUserAccountMembershipComponent {
     });
   }
 
-  public onRedeemCoupon() {
+  protected onRedeemCoupon() {
     this.notificationService.prompt({
       confirmFn: (value) => {
         const couponCode = value?.trim();

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hallo-ghostfolio-page',

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hello-ghostfolio-page',

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-first-months-in-open-source-page',

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-meets-internet-identity-page',

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-how-do-i-get-my-finances-in-order-page',

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-500-stars-on-github-page',

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hacktoberfest-2022-page',

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.component.ts

@@ -1,11 +1,12 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-friday-2022-page',

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-the-importance-of-tracking-your-personal-finances-page',

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-auf-sackgeld-vorgestellt-page',

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-meets-umbrel-page',

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-1000-stars-on-github-page',

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-unlock-your-financial-potential-with-ghostfolio-page',

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-exploring-the-path-to-fire-page-page',

apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-joins-oss-friends-page',

apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-2-page',

apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hacktoberfest-2023-page',

apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.component.ts

@@ -1,11 +1,12 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-week-2023-page',

apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hacktoberfest-2023-debriefing-page',

apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hacktoberfest-2024-page',

apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.component.ts

@@ -1,11 +1,12 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-weeks-2024-page',

apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-hacktoberfest-2025-page',

apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.component.ts

@@ -1,11 +1,12 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-weeks-2025-page',

apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.component.ts

@@ -1,10 +1,11 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [MatButtonModule, RouterModule],
   selector: 'gf-ghostfolio-3-page',

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

@@ -1,7 +1,11 @@
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DataService } from '@ghostfolio/ui/services';
 
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -9,6 +13,7 @@ import { addIcons } from 'ionicons';
 import { chevronForwardOutline } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   imports: [IonIcon, MatCardModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

libs/common/src/lib/personal-finance-tools.ts

@@ -14,6 +14,13 @@ export const personalFinanceTools: Product[] = [
     slogan: 'Lifetime Personal Finance Control, One Single Payment.',
     url: 'https://www.mechcad.net'
   },
+  {
+    categories: ['WEALTH_MANAGEMENT'],
+    key: 'akkuro',
+    name: 'Akkuro',
+    slogan: 'Composable Banking',
+    url: 'https://akkuro.com'
+  },
   {
     categories: ['ETF_TRACKING', 'STOCK_TRACKING'],
     founded: 2023,
@@ -215,7 +222,7 @@ export const personalFinanceTools: Product[] = [
     name: 'Buxfer',
     origin: 'US',
     platforms: ['WEB'],
-    pricingPerYear: '$48',
+    pricingPerYear: '$96',
     regions: ['Global'],
     slogan: 'Take control of your financial future',
     url: 'https://www.buxfer.com'