Core: How to translate <select><optgroup label> ?

[stephanie-b1n3t]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
I can't find the way to translate the label of a select option group (<select><optgroup label>).

Expected/desired behavior
I'd have expected something like :

<select name="mySelect" [(ngModel)]="myModel">
    <optgroup *ngFor="let value of list" label="my.translation.id.{{value}}" translate>
        <option></option>
        ...
    </optgroup>
</select>

Please tell us about your environment:

• ngx-translate version: 10.x.x

• Angular version: 6.x.x

• Browser: all

[CodeAndWeb]

You can use the translate pipe:

<select>
    <optgroup *ngFor="let value of list" label="{{ 'my.translation.id.'+value | translate}}">
    </optgroup>
</select>

[stephanie-b1n3t]

Yeah ! It works !!!
Many many thanks !

[karpawar]

Hi
I got it done in same way.
Thank You
<select placeholder="State"> <option *ngFor="let state of states" [value]="state.code"> {{ 'STATEDROPDOWN.'+state.name | translate}} </option> </select>

StackBlitz for referrence : https://stackblitz.com/edit/trying-ngx-tranlate?file=src%2Fapp%2Fapp.component.html

[Xstream007]

Hi
I got it done in same way.
Thank You
<select placeholder="State"> <option *ngFor="let state of states" [value]="state.code"> {{ 'STATEDROPDOWN.'+state.name | translate}} </option> </select>

StackBlitz for referrence : https://stackblitz.com/edit/trying-ngx-tranlate?file=src%2Fapp%2Fapp.component.html

This is not working for me in Angular 8. What I did is as follows:-

<select class="ems_create_budget_elements" name="ems_create_budget_financial_month">
<option [ngValue]="null" selected translate>Select Financial Month</option>
<option [ngValue]="1">{{'JAN' | translate}}</option>
<option [ngValue]="2">{{'FEB' | translate}}</option>
<option [ngValue]="3">{{'MAR' | translate}}</option>
<option [ngValue]="4">{{'APR' | translate}}</option>
<option [ngValue]="5">{{'MAY' | translate}}</option>
<option [ngValue]="6">{{'JUN' | translate}}</option>
<option [ngValue]="7">{{'JUL' | translate}}</option>
<option [ngValue]="8">{{'AUG' | translate}}</option>
<option [ngValue]="9">{{'SEP' | translate}}</option>
<option [ngValue]="10">{{'OCT' | translate}}></option>
<option [ngValue]="11">{{'NOV' | translate}}</option>
<option [ngValue]="12">{{'DEC' | translate}}</option>
</select>

Where am I going wrong?