angularinternationalizationi18nextangular-i18n

How to translate an @Input with i18n in Angular?

I have a component with a custom input, which I call like this:

<app-button [color]="'black'"
            [label]="'Manage'"
></app-button>

I want to translate the label of this button using i18n. I tried the following options, without any luck:

<app-button [color]="'black'"
            [label]="'Manage'"
            i18n
></app-button>

<app-button [color]="'black'"
            [label]="'Manage'"
            i18n-label
></app-button>

<app-button [color]="'black'"
            [label]="'Manage'"
            i18n-[label]
></app-button>

Does anyone have a clue on how I can achieve what I want to do, template-side?

Solution

  • I just found a solution.

    Instead of calling my button with:

    <app-button [color]="'black'"
            [label]="'Manage'"
></app-button>

    I call it with:

    <app-button [color]="'black'"
            label="Manage"
            i18n-label
></app-button>

    And then the translation appears in the translation file!