Q:

Angular 4 i18n for custom attributes

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.

A:

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.

A:

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>

