[SOLVED] How to pass i18n data to a component as parameter

How to pass i18n data to a component as parameter

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

Solution

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.