Make Route.title i18n:able at runtime

This issue has been tracked since 2022-09-13.

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

We have a very large Angular 14 project that is available in multiple languages. We use NgxTranslate as the built-in i18n support didn't suffice.

I was looking at the Route definition and I was saddened to see that it seems to be very hard to make the new "title" config in the Route definition work for a site with multiple languages when overriding DefaultTitleStrategy as the target component is not available in the RouterStateSnapshot and the route is not activated yet.

I was hoping to use a strategy that looked up the title in the NgxTranslate translation objects, where the component name is a key as per our strategy.

I don't think there is a way to get the component name in a custom TitleStrategy?

Proposed solution

Expose the Component or component name to the TitleStrategy or allow the title to be an object that one can use in the custom strategy?

Update documentation on how to use the title feature in a multilingual website?

Alternatives considered

I tried different ways to getting the component name from the TitleStrategy, but I wasn't able to.

We currently set the titles using Title in every component and would like to move away from this.

stnor wrote this answer on 2022-09-13

Same goes for upcoming features such as #44928

JoostK wrote this answer on 2022-09-13

The name of a component should not be used as translation key; class names are renamed in minification optimizations and are not guaranteed to be unique, nor stable, after such optimizations.

It makes more sense to me to use Route.data.title itself as translation key.

Additionally, it seems to me that the component type is already available in ActivatedRouteSnapshot#component. Am I missing something?

stnor wrote this answer on 2022-09-13

I agree on using the title as key, and change the interface so that it allows an object.

The route is not activated when the TitleStrategy is executed, so that doesn't work, and are as you suggest, perhaps not a godo idea either

What I can do right now is:

    {path: "", component: QuestListComponent, pathMatch: "full", title: 'QuestListComponent.title'},

but that's not very DRY.

I'd prefer:

    {path: "", component: QuestListComponent, pathMatch: "full", title: {en: "Foo", fr: "Le foo"},

That would only require a change in the Route interface, currently an optional string, and the same approach could be used in #44928

JoostK wrote this answer on 2022-09-13

The route is not activated when the TitleStrategy is executed, so that doesn't work, and are as you suggest perhaps not a godo idea either

This makes me wonder how you get access to the ActivatedRouteSnapshot?

stnor wrote this answer on 2022-09-13

I used the Injector to get the ActivatedRoute in the TitleStrategy but that only returns the root component it seems. I was incorrectly assuming it was the previous route. Regardless it seems to be a dead end.

JoostK wrote this answer on 2022-09-13

Ah, I would have thought so. An ActivatedRouteSnapshot is actually provided to TitleStrategy#updateTitle; that's the one you should be using.

stnor wrote this answer on 2022-09-13

the TitleStrategy#updateTitle only gets the RouterStateSnapshotwhich contains nothing useful for this context afaik.

Screenshot 2022-09-13 at 14 20 54

Regardless, would you accept a PR to accept an object as title in the route def?

JoostK wrote this answer on 2022-09-13

That's because the route snapshot represents a tree. getResolvedTitleForRoute will be called for all nodes in the tree that represent the primary outlet.

Regardless, would you accept a PR to accept an object as title in the route def?

I don't think this is needed. getResolvedTitleForRoute can fetch any data attribute from the route; it doesn't have to be stored in Route.data[RouteTitleKey].

stnor wrote this answer on 2022-09-13

So you're basically saying I shouldn't use the title attribute? What's the best practice for i18n-ing title then?

JoostK wrote this answer on 2022-09-13

If the title attribute doesn't provide you with the flexibility that you need, then I'm indeed saying that you can have your own data property that can be used in a custom DefaultTitleStrategy as you wish.

As for i18n'ing the title: Angular's $localize can be used for title without a problem, but this is because it's a static translation that cannot change afterwards. Alternative i18n solutions likely have their own ways of translating strings/keys, which can be accomplished using a custom DefaultTitleStrategy that integrates with such i18n system.

stnor wrote this answer on 2022-09-13

Ok, thanks.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84091
Watcher Count 3064
Fork Count 22233
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date