Search code examples
angulardropdownprimengngx-translate

Angular 4 PrimeNG dropdown translate selected option

In an Angular 4 application with PrimeNG components using the ngx-translate services, I want to translate also the selectedOption of the dropdown, not only the options of the dropdown.

Into the my Component I have declared the options and the selected option

export class CronPickerComponent  {
   selectedOption: string = 'Jahr';
   options: SelectItem[];

   constructor( private translate: TranslateService ) {
       this.options = [];
       this.options.push({ label: 'Jahr', value: 'Jahr' });
       this.options.push({ label: 'Monat', value: 'Monat' });
       this.options.push({ label: 'Woche', value: 'Woche' });
       this.options.push({ label: 'Tag', value: 'Tag' });
       this.options.push({ label: 'Stunde', value: 'Stunde' });
       this.options.push({ label: 'Minute', value: 'Minute' });
    }

   computeExpressionFormat() {
           //  ...
     }

 }

And in the corresponding html I have inserted the corresponded primeNG dropdown

   <p-dropdown id="cronexpressionoptions" [options]="options" 
       [(ngModel)]="selectedOption"  [style]="{'width':'120px'}" 
       (onChange)="computeExpressionFormat()">
              <template let-option pTemplate="item">
                    <div  translate>{{option.label}}</div>
                </template>
   </p-dropdown>

The problem is that the options are displayed translated but the selected value of the dropdown is not translated. As it can been seen in the next image the options are translated into English but the Selected Value remains in Germans (the initial Value).

Is there a way to translate the selected value or to add a template for the selected value. Also on the api of the primeNG dropdown I don't see an option to add a template for the selected value.

enter image description here

Solution

  • You can use stream() or get() method from TranslateService:

    this.translate.stream('dropdownTranslations').subscribe(val => {
    this.options.push(
      {label: val.jahr, value: val.jahr},
      {label: val.monat, value: val.monat},
      ...
    );
});

    stream() is usable when you need to change translation when for example user change his language.