Angular Localize route titles #5813

8 Answer(s)

• 

  0

  guven.uysall created one year ago

  Hi,

  We do this in our microservice project.ExampleService::LocalizationKey. ExampleService is the name of our service.

  Save Cancel
• 

  0

  alpisala created one year ago

  Hi,

  We do this in our microservice project.ExampleService::LocalizationKey. ExampleService is the name of our service.

  Hi again! Sorry I didnt get what you mean by that. I looked at microservice template documentation but couldnt find anything...

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  hi

  You can add the localization resource name.

  https://docs.abp.io/en/abp/latest/UI/Angular/Localization

  Save Cancel
• 

  0

  AlderCove created one year ago

  Add a class to extends TitleStrategy and localize the title in that class: https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j

  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [
      {
        provide: TitleStrategy,
        useClass: TemplatePageTitleStrategy
      }
    ]
  })
  export class AppRoutingModule { }
  

  ---

  import { LocalizationService } from '@abp/ng.core';
  import { Injectable, Injector } from '@angular/core';
  import { Title } from '@angular/platform-browser';
  import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
  
  @Injectable()
  export class TemplatePageTitleStrategy extends TitleStrategy {
    constructor(private readonly title: Title, private injector: Injector) {
      super();
    }
    private localizationService: LocalizationService;
    override updateTitle(routerState: RouterStateSnapshot) {
      this.localizationService = this.injector.get(LocalizationService);
  
      let localizedAppTitle = this.l('::BrowserTitle:Application');
  
      const routeTitle = this.buildTitle(routerState);
  
      if (routeTitle !== undefined && localizedAppTitle !== undefined) {
        let localizedRouteTitle = this.l(routeTitle);
        this.title.setTitle(`${localizedRouteTitle} - ${localizedAppTitle}`);
      } else {
        this.title.setTitle(`${localizedAppTitle}`);
      }
    }
  
    l(key: string): string {
      return this.localizationService.instant({
        key: key,
        defaultValue: 'Default',
      });
    }
  }
  

  Save Cancel

  1
• 

  1

  masum.ulu created one year ago

  Support Team Angular Expert

  Hi,

  You can also use @AlderCove's code like below

  import { Injectable, inject } from '@angular/core';
  import { Title } from '@angular/platform-browser';
  import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
  import { LocalizationService } from '@abp/ng.core';
  
  @Injectable()
  export class TemplatePageTitleStrategy extends TitleStrategy {
    protected readonly title = inject(Title);
    protected readonly localizationService = inject(LocalizationService);
  
    override updateTitle(routerState: RouterStateSnapshot) {
      const title = this.buildTitle(routerState);
      const localizedTitle = this.localizationService.instant(title);
      this.title.setTitle(localizedTitle);
    }
  }
  

  Save Cancel

  2
• 

  0

  alpisala created one year ago

  Hi! Thank you for your replies. But it still doesnt work.Here is my code: items-routing.module.ts:

  const routes: Routes = [
    { path: 'services', component: ServicesComponent,title:"Services"},
    { path: 'service/::itemId', component: ServicePageComponent,title:"Service" },
    { path: 'item/::itemId', component: ItemPageComponent,title:"Item" },
    { path: '::isMatClass', component: ItemsComponent,title:"Items" },
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [
      {
        provide: TitleStrategy,
        useClass: TemplatePageTitleStrategy
      }
    ]
  })
  export class ItemsRoutingModule{ }
  

  TemplatePageTitleStrategy.ts:

  import { LocalizationService } from "@abp/ng.core";
  import { Injectable, inject } from "@angular/core";
  import { Title } from "@angular/platform-browser";
  import { RouterStateSnapshot, TitleStrategy } from "@angular/router";
  
  @Injectable()
  export class TemplatePageTitleStrategy extends TitleStrategy {
      protected readonly title = inject(Title);
      protected readonly localizationService = inject(LocalizationService);
    
      override updateTitle(routerState: RouterStateSnapshot) {
        const title = this.buildTitle(routerState);
        const localizedTitle = this.localizationService.instant(title);
        this.title.setTitle(localizedTitle);
      }
    }
  

  Im on turkish language right now and my tr.json has the keys...

  Save Cancel
• 

  1

  masum.ulu created one year ago

  Support Team Angular Expert

  Hi again alpisala,

  Can you please try to provide it in AppRoutingModule ?

  Save Cancel
• 

  0

  alpisala created one year ago

  Hi again alpisala,

  Can you please try to provide it in AppRoutingModule ?

  It Worked! Thank you.

  Save Cancel

  1