Open Closed

Angular Localize route titles #5813


User avatar
0
alpisala created
  • ABP Framework version: v7.3.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace
  • Steps to reproduce the issue:" Hey! I just want to localize the title of the routes of my module.How can i do it ?

8 Answer(s)
  • User Avatar
    0
    guven.uysall created

    Hi,

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

  • User Avatar
    0
    alpisala created

    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...

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can add the localization resource name.

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

  • User Avatar
    0
    AlderCove created

    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',
        });
      }
    }
    
  • User Avatar
    1
    masum.ulu created
    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);
      }
    }
    
  • User Avatar
    0
    alpisala created

    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...

  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    Hi again alpisala,

    Can you please try to provide it in AppRoutingModule ?

  • User Avatar
    0
    alpisala created

    Hi again alpisala,

    Can you please try to provide it in AppRoutingModule ?

    It Worked! Thank you.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38