Make Route.title i18n:able at runtime

This issue has been created 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 84080
Watcher Count 3064
Fork Count 22235
Issue Count 1197

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Sentence segmentation inserts random spaces 2 2020-04-16 2022-08-20
Question regarding disparity between manually-calculated potentials vs. galpy potentials 4 2021-11-20 2022-04-19
Ambiguity in output units for omegac(), epifreq(), verticalfreq() 2 2021-10-11 2022-08-11
Document Crawl have not changed for days 0 2021-03-10 2022-08-03
Library does not work, unless you add: enableRemoteModule: true 3 2020-12-24 2022-09-13
Custom KMS Server IP 1 2022-06-10 2022-09-21
AuthorizationBehaviour Role-based authorization 1 2021-04-24 2022-08-09
Need to update doc for https://docs.microsoft.com/en-us/rest/api/cognitiveservices-bingsearch/bing-spell-check-api-v7-reference 4 2022-01-05 2022-09-23
Version & Track Datasets in Production 2 2021-10-12 2022-09-28
Error when installing using luarocks using Lua 5.4.0 4 2020-09-05 2022-09-29
Fun references of operators have the wrong arity and module name 2 2021-03-04 2022-09-07
LHR Dual-mining not working with multiple cards (ETH/RVN) 0 2021-10-28 2021-11-21
Conditional `mock_xp` assignment is awkward for build systems 2 2021-12-04 2022-08-27
tableview 左滑删除失效了 1 2021-12-28 2022-01-06
放在首页时,滚动后高度不正确 2 2021-12-29 2022-01-06
Add new conditional formating - Properties are overlapped 11 2020-11-24 2022-09-11
Disable iGPU in EFI Windows 2 2021-05-08 2022-09-10
Compile Error 8.4.0 10 2020-11-12 2022-01-14
Is there currently ecpoint's multiply function? 0 2021-03-31 2022-09-01
Save_snapshot filter doesn't take to accout vertex colors 0 2022-08-17 2022-09-26
/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.25' not found 2 2022-08-11 2022-09-26
load_new_mesh loads OBJ objects as a single mesh 0 2022-08-17 2022-09-26
Clearml ignores argparse default values 5 2021-10-19 2022-09-04
Bad printing of complex numbers in RStudio 2 2022-06-27 2022-09-16
Add sourceWrap configuration option 3 2021-11-23 2022-09-18
IllegalArgumentException in jetty after compilation to GraalVM native image 1 2020-03-12 2022-09-23
Handling EofException 7 2020-07-07 2022-09-22
Feature request: support JSON formatting for application/vnd.api+json 2 2021-09-02 2022-08-10
Fix `android_tests` CI jobs with bazel 6.x 0 2022-05-02 2022-09-01
JetBrains IDE icons not working 4 2021-01-15 2022-09-22
Brave Broser Nightly build icon 3 2021-01-15 2022-09-22
EXPERIMENTAL is not documented, behavior is not tested neither. 0 2022-01-18 2022-09-01
How to display the title/tooltip on tab focus/focus for kendoButton in agular 1 2022-03-22 2022-09-22
Update compatibility to support Less.js 3 and Less.js 4 6 2021-01-18 2022-09-19
Ability to show date in custom date format in date picker. 1 2022-05-13 2022-08-24
ValidationContext.java:[267,7] <anonymous com.adobe.epubcheck.opf.ValidationContext$ValidationContextPredicates$1> is not abstract and does not override abstract method test(com.adobe.epubcheck.opf.ValidationContext) in java.util.function.Predicate 2 2020-09-11 2022-07-24
Add pytest.ini support for --reruns and --only-rerun options 0 2021-07-15 2022-09-22
cmd/go: invalid flag in #cgo CFLAGS: -F 9 2022-02-04 2022-07-24
Dependency cycles 1 2021-12-29 2022-01-16
Cleanup Lib/email/image.py after imghdr deprecation 1 2022-04-14 2022-08-10
Allow annotating created p2p services 0 2022-01-03 2022-09-16
Include Dictation and Siri requirements for Listening Mode permissions/setup 0 2022-05-31 2022-08-02
`azurerm_hdinsight_kafka_cluster` crash 3 2022-07-26 2022-08-30
Import terraform import azurerm_kubernetes_cluster.x leads to destroy 2 2022-07-27 2022-09-19
Linux VM Plan Success with Password Set While Password Authentication is Disabled 1 2022-07-27 2022-09-27
Update Physical Locations table to use AG-Grid instead of jQuery "dataTables" 0 2022-01-11 2022-09-28
<VsSelect> - valueLabel shows Array[0] but it has a selected value. 2 2020-07-03 2022-09-29
Podman containers running in "Created" status 6 2021-09-08 2022-09-24
[Rule Tuning] GCP Integration Rule Queries with googlecloud.audit 1 2022-07-08 2022-09-09
Webpack 5 upgrade script error 1 2020-10-11 2022-09-12