Internationalisation for components

[boeckMt]

Description

Right now there is no possibility to translate some of the used strings for titles and default values in our components e.g.:
in @dlr-eoc/layer-control - 'Opacity', 'Layer Setting', 'Layer Legend', 'Layer Info'...

We need a general way how to translate the components we provide in your library so it is possible to create applications with multiple languages.

Relevant Package

• All packages which include fix strings in templates.

Examples

Clarity Design uses something like a 'CommonStringsService' (so bindings to all labels and text)

• https://github.com/vmware/clarity/blob/96ed85abd18db0087c8489cfd9614ab9baecc154/packages/angular/projects/clr-angular/src/forms/datepicker/daypicker.ts#L25
• https://github.com/vmware/clarity/blob/96ed85abd18db0087c8489cfd9614ab9baecc154/packages/angular/projects/clr-angular/src/forms/datepicker/daypicker.html#L28

Clarity Design Core
vmware-archive/clarity#4502 -> https://clarity.design/storybook/core/?path=/story/foundation-internationalization--page

Angular Material uses something like a 'class instance' extension

• https://github.com/angular/components/blob/ecf41053970fdafefce4b0533b161fe241a7051a/src/material/paginator/paginator-intl.ts#L18
• https://github.com/angular/components/blob/ecf41053970fdafefce4b0533b161fe241a7051a/src/material/paginator/paginator.html#L37
• https://stackoverflow.com/a/60127007

ng-bootstrap uses angular i18n

• https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/pagination/pagination.ts#L124
• https://ng-bootstrap.github.io/#/getting-started#i18n

ag-grid

• https://www.ag-grid.com/documentation/javascript/localisation/

...object of key/value pairs via the localeText property...

Angular Ant Design

• https://ng.ant.design/docs/i18n/en

Carbon Components Angular

• https://angular.carbondesignsystem.com/documentation/classes/src_i18n.i18n.html

...internal singleton service...

Angular DevExtreme

• https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/Angular/Light/

npm https://www.npmjs.com/package/globalize

Angular Fancy grid

• https://fancygrid.com/docs/grid-concepts/localization

init config object

Ignite UI for Angular

• https://www.infragistics.com/products/ignite-ui-angular/angular/components/localization

Angular Kendo

• https://www.telerik.com/kendo-angular-ui/components/globalization/localization/

Angular Nebular

• i18n support akveo/nebular#398

ng-lightning

• https://github.com/ng-lightning/ng-lightning/issues?q=is%3Aissue+i18n

Angular PrimeNG

• https://primefaces.org/primeng/showcase/#/i18n

Angular TrulyUI

• https://truly-ui.com/i18n

Angular vaadin

• https://vaadin.com/docs/v14/flow/advanced/tutorial-i18n-localization.html

Angular wijmo

• https://www.grapecity.com/wijmo/docs/GettingStarted/Globalization

Describe alternatives you've considered

• https://angular.io/guide/i18n
• https://github.com/ttag-org/ttag
• https://github.com/ngx-translate/core
• https://github.com/Romanchuk/angular-i18next

[boeckMt]

@MichaelLangbein and @voinSR maybe you can add some comments to this Issue.

[MichaelLangbein]

Hi!
So, it seems that slowly angular's own i18n is becoming the stable and complete go-to solution for this: https://phrase.com/blog/posts/best-libraries-for-angular-i18n/ .
Once I get a change to try it out in one of our projects I'll try to feed back what I've got into our frontend-libraries.

[MichaelLangbein]

Hey guys!

I did some comparison between i18n and ngx-translate.
I'm using the latter in the riesgos project.

I've got two important requirements:

• be able to switch language inside the application (preferably without reloading)
• be able to interpolate variables

	i18n	ngx-translate
variables in strings	Works fine: <target>Un texto con el número <x id="INTERPOLATION" equiv-text="{{ variableName }}"/> adentro.</target>	Works fine: public variableName = {nr: 42} <p>{{ 'bodyWithVariable' | translate:variableName }}</p> "bodyWithVariable": "Un texto con el número {{ nr }} adentro
live language switching	Kind of works... But not yet documented; will potentially change. Also seems to require page reload for every translation change.	Trivial: constructor(private trSvc: TranslateService) {} useLang(langCode: string) { this.trSvc.use(langCode); }
other notes	- Requires changes to angular.json; not sure how well this will play with our ukis-libraries mono-repo. - A lot of features will hopefully come in the future, but not quite there yet.	- Is claimed to be only a temporary solution - creator now works on Angular's i18n.

Please find a demo ...

• ... for ngx-translate here
• ... for i18n here

It seems that angular is going for i18n... but things are evolving slowly, and there is very little documentation when it comes to live-reloading.
i18n also makes heavy use of Ivy, which is not exactly the easiest thing to read when you try to understand the source-code.

@boeckMt , @voinSR : What are your internationalization needs? I'll do some more research on live-reloading using i18n, but at the moment I'm a little worried that it does not yet support all the features we'd need...

[boeckMt]

@MichaelLangbein I created a more extensive demo for angular i18n.
This is how I used translations in last times, but so far I haven't figured out a way to do live switching.

Maybe we should let the decision to the developer which method to use (I also don't like to include i18n in the libraries for only a few translations) and do something like the Examples abov, so e.g. a config which we can pass to the module or component.

We also can further check what other angular component libraries are doing https://angular.io/resources?category=development#ui-components

[boeckMt]

Another idea would be to use content projection like we have done in layerentry to pas a different title.

<div #ref>
  <ng-content></ng-content>
</div>

<span *ngIf="ref.children.length == 0">
   default text
</span>

But this is not working for nested components.
Also a input @Input() i18n-translations: { title: string, ...} or a service could be more performant.

[boeckMt]

Clarity Core now uses a global service or component inputs

• https://clarity.design/storybook/core/?path=/docs/foundation-internationalization--page