Open boeckMt opened 4 years ago
@MichaelLangbein and @voinSR maybe you can add some comments to this Issue.
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.
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...
@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
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.
Clarity Core now uses a global service or component inputs
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
Angular Ant Design
Carbon Components Angular
Angular DevExtreme
Angular Fancy grid
Ignite UI for Angular
Angular Kendo
Angular Nebular
ng-lightning
Angular PrimeNG
Angular TrulyUI
Angular vaadin
Angular wijmo
Describe alternatives you've considered