How to pass i18n data to a component as parameter

Question

I don't have a lot of experience with i18n and I'm stuck with this. I have component within another component. All I want to do is to pass i18n as one of the parameters. How do I do that?

Here is what I have:

Component A (Parent)

<card content="My text that needs to be transliterated" buttonLabel="Send"></card>

Component B (Card - Child)

@Input('content') content: string;
@Input('buttonLabel') buttonLabel: string;

Normally, I would just <p i18n="meaning|description@@id">content to be translated</p>

How can I do that on this case?

Thanks

From where did you get this usage:
content to be translated
? Never seen this before — Rafael de Castro, May 14 '21 at 19:12
This is the standard way @RafaeldeCastro: https://angular.io/guide/i18n — Michael Karén, May 15 '21 at 17:49

score 2 · Accepted Answer · answered May 15 '21 at 22:32

To mark an attribute for translation, add i18n-attribute in which attribute is the attribute to translate. Like in your case with i18n-content and i18n-buttonLabel:

<card 
  i18n-content 
  content="My text that needs to be transliterated"
  i18n-buttonLabel="@@buttonLabelTranslation"
  buttonLabel="Send">
</card>

You also can assign a meaning, description, and custom ID with the i18n-attribute="<meaning>|<description>@@<id>" syntax.

score 0 · Answer 2 · answered May 14 '21 at 19:56

0

Ideally, the way we use translation service is like {{ 'Key' | translate }} and to simply pass it from parent to child component you can do it as shown below and it will work

<card [content]="'YOUR_TRANSLATION_CONTENT_KEY' | translate"  
      [buttonLabel]="'YOUR_TRANSLATION_BUTTON_KEY' | translate">
</card>

answered May 14 '21 at 19:56

Amit Bisht

4,870
14
54
83

I don't recognize the translate pipe from the built-in i18n as the author is using. I believe this is ngx-translate? – Michael Karén May 15 '21 at 22:35

score 0 · Answer 3 · answered Jul 01 '22 at 09:23

You can do

<ng-container i18n="@@YOUR_TRANSLATION_KEY">Edit</ng-container>

You could change ng-container with a div tag.

Afterward, you can generate the translation file with the following command:

ng extract-i18n --format json  --output-path src/locale

Whereby format is the format you want

How to pass i18n data to a component as parameter

3 Answers3