Search code examples
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!