I need to internationalize my PWA built with Ionic 4 web components using Stencil. Basically have my web-shop in several languages, currencies, SEO routing etc. I’ve previously used https://robisim74.github.io/angular-l10n for an Angular project. But as I’m using web components now, shall I maybe use https://github.com/t2ym/i18n-behavior instead? Anyone who has any experience with that?
My web-shop will both be a PWA, Android app, IOS app.
What I liked with the angular-l10n library was:
The translation text can be retrieved via directives or pure pipes, e.g:
place-order.h1-place-order
tooltip="{{ ‘cart-checkout.invalid-input’ | translate:lang }}"
Or in a component class, e.g:
@Component({
…
template: <h1> {{ title }} </h1> <button (click)="getTranslation()">Translate</button>
})
export class HomeComponent {
title: string;
constructor(public translation: TranslationService) { }
getTranslation(): void {
this.title = this.translation.translate(‘Title’);
Using Html tags in the JSON translations file
Using directives:
<span [innerHTML]="‘cart-checkout.p-1b-error-box2-cart’" l10nTranslate>
Using pipes:
Using variables in translations
JSON file:
“defaults-are-min”: “Defaults are Min {{defaultMin}} and Max {{defaultMax}}.”,
view: