Angular 4 i18n for custom attributes

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

You can try the canonical form of angular attribtute binding - it should work with angular 4.4.6 and typescript 2.3.4 too. I have proofed it with this environment:

Angular CLI: 1.6.8
Node: 6.10.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

try this solution please - i hope it is helpfull:

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