dlr-eoc / ukis-frontend-libraries

A collection of angular ui-components, services, interfaces... to help you create geospatial mapping applications for the web.
Apache License 2.0
17 stars 4 forks source link

Internationalisation for components #8

Open boeckMt opened 4 years ago

boeckMt commented 4 years ago

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

Examples

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

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

Angular Material uses something like a 'class instance' extension

ng-bootstrap uses angular i18n

ag-grid

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

Angular Ant Design

Carbon Components Angular

...internal singleton service...

Angular DevExtreme

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

Angular Fancy grid

init config object

Ignite UI for Angular

Angular Kendo

Angular Nebular

ng-lightning

Angular PrimeNG

Angular TrulyUI

Angular vaadin

Angular wijmo

Describe alternatives you've considered

boeckMt commented 4 years ago

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

MichaelLangbein commented 4 years ago

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 commented 3 years ago

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:

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

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 commented 3 years ago

@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 commented 2 years ago

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 commented 2 years ago

Clarity Core now uses a global service or component inputs