How to translate an @Input with i18n in Angular?

Question

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?

Answer 1

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!