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.

Stepdaughter

So, what happens when you do just that? Have you tried it? – Capwell

Yes, I tried. But this does not generate an entry in messages.xlf file.I will update the question. – Stepdaughter

Just use title="Nights" i18n-title="search criteria nights@@criteriaNights". That works fine here. It's useless to use an angular expression and the bracket notation when all you want to pass is a hard-coded string. – Capwell

Thank you. It works ! We've used bracket notation unnecessarily. – Stepdaughter

Hello i have the same problem with a selfdefined attribute [errorMsg] as @Input(). This is used in a template of a @Component like <p *ngIf="isInvalid()">{{errorMsg}}</p> I think this is not a special case and angular should have a solution for this. Is there a solution too? – Devitt

Does the syntax bind-title="Nights" i18n-bind-title="..." work? The bind-title should be the canonical form of [title] . – Devitt

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.

Addis

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>

Vincenty

This doesn't work. With Ivy the string isn't extracted into messages.xlf. – Jarl

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>

Devitt