Search code examples
angularionic-frameworkangular-i18n

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?

Solution

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