4

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.

k.vincent
  • 3,743
  • 8
  • 37
  • 74
  • i18n happens at **build** time. So you can't possibly pass a dynamic value to the i18n attribute. – JB Nizet Oct 24 '18 at 07:00
  • True! You are right. This is actually the issue. Is there any possibility to work around this, or will I be forced to change my concept. To change the whole concept will be lot of work as the app is really a kind of huge. – k.vincent Oct 24 '18 at 07:03

1 Answers1

5

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>
k.vincent
  • 3,743
  • 8
  • 37
  • 74
  • Hey I am trying to implement what you put as the answer. I run ng xi18n and the translations don't get created. Does it work for you? – L1ghtk3ira Dec 05 '18 at 21:20
  • Do you mind taking a look at mine? – L1ghtk3ira Dec 05 '18 at 21:32
  • I also try to display like this:

    It shows up on ng serve but generating translation file is empty     – L1ghtk3ira Dec 05 '18 at 21:33
  • I am using just my mobile right now and away from my machine. If it‘s not urgent, I‘ll check tomorrow. What does the command line puts out, when you run the app with the translation command? Any error, warning or something similar? – k.vincent Dec 05 '18 at 21:39
  • No just creates an empty translation file. Thanks for taking the time though It's much appreciated. I will keep looking into it and let you know if I find anything. This would make child components much better. – L1ghtk3ira Dec 05 '18 at 21:50
  • 1
    It works when I omit the brackets []. So instead of – L1ghtk3ira Dec 05 '18 at 22:17
  • Hey Hope yu don't mind but I updated your answer. With what worked for me. It was the brackets on the attribute that i18n did not like. I thought could be better explained so I updated yours. Thanks again. – L1ghtk3ira Dec 05 '18 at 22:30
  • That's fine. Happy it did drive you in the right way. Some times it could depends on the concept behind, but the main idea is the key. Just give the answer a thump/vote up, if did help you. – k.vincent Dec 06 '18 at 14:49