CODEWITHSUNDEEP
angularionic-frameworkangular-i18n
Deitsch
Deitsch

Reputation: 2178

Angular i18n translation for component with @Input()

I have components which are essentially <ion-item>s i can pass a label among other things to. I want to translate the labels using i18n.
Here is a stripped down example:

<app-form-text 
    labelIn="TextToBeTranslated" 
    [formControlIn]="formGroup.controls.someControl">
</app-form-text>

<ion-item>
  <ion-label>
    <h2>{{ labelIn }}</h2>
  </ion-label>
  <ion-input [formControl]="formControlIn"></ion-input>
</ion-item>

How can the labelIn text be translated?

Upvotes: 1

Views: 3148

Answers (2)

Deitsch
Deitsch

Reputation: 2178

Since i did not want to use ngx-translate but rather use angulars default translation this is what i did:

Simply add the input parameter name after i18n- to translate it.

<app-form-text i18n-labelIn
    labelIn="TextToBeTranslated" 
    [formControlIn]="formGroup.controls.someControl">
</app-form-text>

Upvotes: 3

Micha
Micha

Reputation: 924

You have to load the

import { TranslateModule } from '@ngx-translate/core';

in app.module.ts

You can use the translationservice then with key-value Texts:

src/assets/i18n/en.json

{
    "Sitetitle": "Angular Multi Language Site",
    "Name": "Name",
    "NameError": "I am sure you must have a name!",
    "Email": "Email address",
    "PhoneNo": "Phone No",
    "Password": "Password",
    "Bio": "Enter bio",
    "TermsConditions": "I agree to terms and conditions.",
    "Submit": "Submit"
}

also de.json

use service in your page and set default-languarge:

export class AppComponent {
  constructor(
    public translate: TranslateService
  ) {
    translate.addLangs(['en', 'de']);
    translate.setDefaultLang('en');
  }
}

switch the language by:

switchLang(lang: string) {
  this.translate.use(lang);
}

use it in your view:

<div class="container">
  <form>
    <div class="form-group">
      <label>{{'Name' | translate}}</label>
      <input type="text" class="form-control">
      <small class="text-danger">{{'NameError' | translate}}</small>
    </div>

    <div class="form-group">
      <label>{{'Email' | translate}}</label>
      <input type="email" class="form-control">
    </div>

    <div class="form-group">
      <label>{{'PhoneNo' | translate}}</label>
      <input type="tel" class="form-control">
    </div>

refer to ngx-translate

Upvotes: 0

Related Questions