Feature(scope): Route Title Resolver

[Doublon]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) will this feature affect?

Don't know / other

Is your feature request related to a problem? Please describe

Hi everyone,

I'm looking for a way to translate every tab title without duplicating the code. To solve this, I would like to create a resolver such as:

export const titleTranslationResolver: ResolveFn<string> = (route, state) => {
  console.log("titleTranslationResolver")
  if (!route.data["titleKey"]) {
    return Promise.resolve('Default title');
  }

  const transloco = inject(TranslocoService);
  return Promise.resolve(transloco.translate(route.data["titleKey"]));
};

and use it in my router:

export const routes: Routes = [
  {
    path: 'participants',
    title: titleTranslationResolver,
    pathMatch: 'full',
    loadComponent: () => import('@presentation/pages/participants-page/participants-page.component').then(m => m.ParticipantsPageComponent),
    canActivate: [ConnectedGuard],
    data: { titleKey: 'participant_list' }
  },
  { path: '',   redirectTo: 'participants', pathMatch: 'full' },
  {
    path: '**',
    title: titleTranslationResolver,
    loadComponent: () => import('@presentation/pages/not-found-page/not-found-page.component').then(m => m.NotFoundPageComponent)
  }
];

The issue with this solution is that Transloco is initialized after my routes, even with this code:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTransloco({
      config: {
        availableLangs: ['en'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
      },
      loader: TranslocoHttpLoader
    }),
    provideRouter(routes),
  ]
};

Describe the solution you'd like

Maybe I did something wrong, but here are two potential solutions:

• Use a native Transloco resolver for translating tabs.
• Allow the TranslocoHttpLoader to initialize before the router.

Describe alternatives you've considered

For now I translate in every component "page" in the ngOnInit method

Additional context

No response

I would like to make a pull request for this feature

No

[windmichael]

Instead of translating the key via the resolver, I would recommend using a TitleStrategy.

For your use-case the TitleStrategy could look like this:

import { Injectable, inject, signal, effect } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { TitleStrategy, RouterStateSnapshot } from "@angular/router";
import { TranslocoService, translateSignal } from "@jsverse/transloco";

@Injectable({ providedIn: 'root' })
export class TemplatePageTitleStrategy extends TitleStrategy {
  private readonly title = inject(Title);
  private readonly transloco = inject(TranslocoService);

  private readonly activeTitle = signal('');
  private readonly translatedTitle = translateSignal(this.activeTitle);

  constructor() {
    super();
    effect(() => this.title.setTitle(this.translatedTitle()));
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title) {
      this.activeTitle.set(title);
    }
  }
}

Then you need to provide your own TitleStrategy in the app-config or AppModule if you still use NgModules:

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    { provide: TitleStrategy, useClass: TemplatePageTitleStrategy },
    ...
  ],
};

Finally, in your routes you can set the key as title:

export const ROUTES: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    title: 'key.home'
  },
];

Hope this helps solving your problem

[Doublon]

Ok, I will tri it !