Angular 4 i18n for custom attributes

user_4165181 0
Viewed 5905

Is there a way to translate custom attributes values in child-components using Angular i18n AOT?

I know we can translate HTML element attributes as below.

 <input i18n-placeholder="search criteria date @@criteriaDate"
        placeholder="Date"
        formControlName="date" required>

But I want to do the same thing for my component attributes. In this example I want to pass title attribute translated value.

 <custom-spinner
        formControlName="nights"
        [title]="'Nights'"
        i18n-title="search criteria nights@@criteriaNights">
      </custom-spinner>

When I try this, it doesn't generate an entry on messages.xlf file. I couldn't find any examples on this.

angular-i18n angular internationalization
3 Answers

Tested in Angular 7. It works by default. You can't use [title] notation for i18n texts. It should be plain text.

      <custom-spinner
        formControlName="nights"
        title="Nights"
        i18n-title="search criteria nights@@criteriaNights">
      </custom-spinner>

Note it will also work for any attributes. For example, my-attr and i18n-my-attr will translate the text inside my-attr.

user_11785720

Try this syntax. i18n-xxx is basically for compiler to recognize, therefore it doesn't follow Angular template binding syntax

<custom-spinner
 formControlName="nights"
 [title]="'Nights'"
 i18n-[title]="search criteria nights@@criteriaNights">
</custom-spinner>
user_124549130
Related