Add previous and next navigation

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

@@ -96,6 +96,8 @@ export class GfProductPageComponent {
   protected readonly routerLinkResourcesPersonalFinanceTools =
     publicRoutes.resources.subRoutes.personalFinanceTools.routerLink;
 
+  protected readonly titlePrefix = $localize`The Open Source Alternative to`;
+
   protected readonly nextProduct = computed(() => {
     return this.sortedPersonalFinanceTools[this.getCurrentProductIndex() + 1];
   });
@@ -166,6 +168,10 @@ export class GfProductPageComponent {
     ];
   }
 
+  protected getProductTitle(product?: Product) {
+    return `Ghostfolio: ${this.titlePrefix} ${product?.name ?? ''}`;
+  }
+
   private getCurrentProductIndex() {
     return this.sortedPersonalFinanceTools.findIndex(({ key }) => {
       return key === this.product2().key;

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -4,9 +4,8 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">
-            <strong>Ghostfolio</strong>:
-            <ng-container i18n>The Open Source Alternative to</ng-container
-            >&nbsp;<strong>{{ product2().name }}</strong>
+            <strong>Ghostfolio</strong>: {{ titlePrefix }}
+            <strong>{{ product2().name }}</strong>
           </h1>
         </div>
         @if (product2().isArchived) {
@@ -392,11 +391,8 @@
           @if (previousProduct()) {
             <a
               class="font-weight-light link-primary text-decoration-none small"
-              i18n-title
-              title="Ghostfolio: The Open Source Alternative to {{
-                previousProduct()?.name
-              }}"
               [routerLink]="getProductRouterLink(previousProduct())"
+              [title]="getProductTitle(previousProduct())"
               >← <span i18n>Previous</span></a
             >
           } @else {
@@ -405,11 +401,8 @@
           @if (nextProduct()) {
             <a
               class="font-weight-light link-primary text-decoration-none small"
-              i18n-title
-              title="Ghostfolio: The Open Source Alternative to {{
-                nextProduct()?.name
-              }}"
               [routerLink]="getProductRouterLink(nextProduct())"
+              [title]="getProductTitle(nextProduct())"
               ><span i18n>Next</span> →</a
             >
           }