CODEWITHSUNDEEP
angularinternationalizationtranslationangular-i18nangular-dynamic-components
k.vincent
k.vincent

Reputation: 4143

How to pass i18n key from parent to child component before translation starts?

I'am using an input-field component which I can embed in different parent components using forms.

In the input child component, I have an i18n translation key as variable using interpolation, which I would like to generate dynamically from parent component, based on customer choice.

input.component.ts:

<div i18n="{{labelTextKey}}">{{labelText}}</div>
<div>
    <input matInput [required]="required" 
                    [name]="name"
                    [(ngModel)]="value" 
                    [type]="type">
</div>

form.component.ts:

<app-input [labelText]="'Second name'"
           [labelTextKey]="'@@LabelSecondName'"
           [name]="'secondName'"
           [ngModel] = "secondName"
           [type] = "'text'"
</app-input>

The issue is that when running the app, the translation occurs before the key is being passed to the variable in the child component, and therefore there is no translation for the key/id: @@LabelSecondName.

So, the labelText keep the original language. Instead of translation, I get a kind of digits which are being generated randomly and as those digits as a key don't exist in the XLF (Version 2.0) file, the text/label is not translated.

Error message: Missing translation for message "8901569964118207331"

The behavior is in a way expected, because the variable: labelTextKey doesn't get the value: @@LabelSecondName passed right in time.

Have been searching, but not able to find a correct solution for that. This question seems to be closer to mine, but not exact the same case, and there also no answer.

Upvotes: 4

Views: 2607

Answers (1)

k.vincent
k.vincent

Reputation: 4143

Issue fixed. Solution:

No need of i18n tag in the child component, just use it in the parent like this:

<app-input i18n-labelText="@@LabelSecondName" labelText="Second name"></app-input>

so, the whole code will look as .:

<app-input [labelText]="'Second name'"
       i18n-labelText="@@LabelSecondName"
       [name]="'secondName'"
       [ngModel] = "secondName"
       [type] = "'text'"
</app-input>

Upvotes: 5

Related Questions