Angular i18n how to translate select options

Question

I'm working on a reactive form on Angular 7, and I need to make a dropdown list with , and I need to translate options from english to french. Options are set in my Ts file. I've heard about ICU expressions, I've read the documentation but I don't understand how it could fit my case. Could someone help me ?

My HTML :

<select name="material" class="form-control input-underline input-lg" formControlName="material"
              [(ngModel)]="portal.material" type="text" required i18n>
   <option selected disabled value=undefined [ngValue]="null">Select a material</option>
   <option *ngFor="let item of material_tab" [ngValue]="item">{{item.name}}</option>    
</select>

My Ts :

materials_tab = [{ name: 'Wood' }, { name: 'Cardboard' }, { name: 'Plastic' }, { name: 'Paper' }, { name: 'Glass' }, { name: 'Metal' }, { name: 'Other' }];

Thanks in advance.

Answer 1

Sorry for late answer, I finally managed to do it.

My HTML :

<option *ngFor="let item of materials_tab" [ngValue]="item" i18n>{item, select, Wood {Wood} Cardboard {Cardboard} Plastic {Plastic} Paper {Paper} Glass {Glass} Metal {Metal} Other {Other}}</option>

My TS :

materials_tab = ['Wood', 'Cardboard', 'Plastic', 'Paper', 'Glass', 'Metal', 'Other'];

And the translation appears after i18n execution (French here):

<source>{VAR_SELECT, select, Wood {Wood} Cardboard {Cardboard} Plastic {Plastic} Paper {Paper} Glass {Glass} Metal {Metal} Other {Other} }</source><target state="new">{VAR_SELECT, select, Wood {Bois} Cardboard {Carton} Plastic {Plastique} Paper {Papier} Glass {Verre} Metal {Métal} Other {Autre} }</target>

The only problem with this solution is that if you have a long list to translate, it becomes unreadable...

I hope this will help someone.