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

Answer 1

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.

Answer 2

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>  

Answer 3

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