update title strategy service to get project name from localized text

2 years ago · f48f78618a
4 changed files with 35 additions and 23 deletions
--- a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts
@ -1,22 +1,19 @@
 import { Injectable, effect, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { ConfigStateService } from './config-state.service';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { LocalizationService } from './localization.service';
+import { DISABLE_PROJECT_NAME } from '../tokens';

@Injectable({
  providedIn: 'root',
 })
 export class AbpTitleStrategy extends TitleStrategy {
  protected readonly title = inject(Title);
-  protected readonly configState = inject(ConfigStateService);
  protected readonly localizationService = inject(LocalizationService);
+  protected readonly disableProjectName = inject(DISABLE_PROJECT_NAME, { optional: true }) || false;
  protected routerState: RouterStateSnapshot;

-  projectName = toSignal(this.configState.getDeep$('localization.defaultResourceName'), {
-    initialValue: 'MyProjectName',
-  });
  langugageChange = toSignal(this.localizationService.languageChange$);

  constructor() {
@ -29,15 +26,26 @@ export class AbpTitleStrategy extends TitleStrategy {
  }

  override updateTitle(routerState: RouterStateSnapshot) {
+    // routerState assignment is necessary for the language change
    this.routerState = routerState;
-    let title = this.buildTitle(routerState);
+    const title = this.buildTitle(routerState);
+
+    let localizedText = '';
+
+    const projectName = this.localizationService.instant({
+      key: '::AppName',
+      defaultValue: 'MyProjectName',
+    });

    if (!title) {
-      this.title.setTitle(this.projectName());
-      return;
+      return this.title.setTitle(projectName);
+    }
+    localizedText = this.localizationService.instant({ key: title, defaultValue: title });
+
+    if (!this.disableProjectName) {
+      localizedText += ` | ${projectName}`;
    }

-    const localizedTitle = this.localizationService.instant({ key: title, defaultValue: title });
-    this.title.setTitle(`${localizedTitle} | ${this.projectName()}`);
+    this.title.setTitle(localizedText);
  }
 }
--- a/npm/ng-packs/packages/core/src/lib/tokens/index.ts
+++ b/npm/ng-packs/packages/core/src/lib/tokens/index.ts
@ -14,4 +14,5 @@ export * from './check-authentication-state';
 export * from './http-context.token';
 export * from './others-group.token';
 export * from './tenant-not-found-by-name';
-export * from './compare-func.token'
+export * from './compare-func.token';
+export * from './title-strategy-disable-project-name.token';
--- a/npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts
+++ b/npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts
@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const DISABLE_PROJECT_NAME = new InjectionToken<boolean>('DISABLE_APP_NAME');
--- a/templates/module/angular/projects/dev-app/src/index.html
+++ b/templates/module/angular/projects/dev-app/src/index.html
@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>DevApp</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>MyProjectName</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>