CODEWITHSUNDEEP
angulardropdownprimengngx-translate
Sfalagkiaris
Sfalagkiaris

Reputation: 157

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

Upvotes: 3

Views: 16238

Answers (5)

Michel Dambros Figueiredo
Michel Dambros Figueiredo

Reputation: 603

I landed here with same problem, actually you can solve this problem by creating a template to the selected value, this is an example:

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
     <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle">{{item.label}}</span>
    </ng-template>
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height:25px;">
        <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
        <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div> </div>
    </ng-template>
</p-dropdown>

I found it here: https://www.primefaces.org/primeng/v9.1.7-lts/#/dropdown

Upvotes: 3

Ynothna
Ynothna

Reputation: 41

add

<template let-option pTemplate="selectedItem">
    <div translate>{{option.label}}</div> 
</template>

Upvotes: 4

ramon22
ramon22

Reputation: 3618

I translate dropdowns using this method in my language files I keep track of lang and dir so for example in my en.json I got:

"App": {
"lang": "en",
"dir": "ltr",
"direction": "right"
}

and in the view I would use it in this way

<div dir="{{'App.dir' | translate}}">
   <select class="form-control" [formControl]="gender">
      <option *ngFor="let gender of genderList" [value]="gender.id">
          {{gender.name['App.lang' | translate]}}
      </option>
   </select>
</div>

for the dropdown values, I chose to keep them out of the translation file, cause I might want to get them from server request...they are shaped as so

const genderList = [
 {id: 1, name: {ar: 'ذكر', en: 'Male'}},
 {id: 2, name: {ar: 'أنثى', en: 'Female'}}
];

Upvotes: -1

Sfalagkiaris
Sfalagkiaris

Reputation: 157

I continued with a solution close to the hint that you provided me by using the Translate Service

               this.translate.onLangChange.subscribe(
                 () => {
                  this.options = [];
                  this.options.push({ label: this.translate.instant('Jahr'), 
                  value: 'Jahr' });
                  this.options.push({ label:  
                  this.translate.instant('Monat'), 
                  value: 'Monat' });

                 }
                );

So when the Translate Service detects a language change reinitialize the options of the dropdown but not loosing the all ready selected value. The label is changing but the value remains the same. Also the selected option will appear with that changed label.

Upvotes: 5

porgo
porgo

Reputation: 1737

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.

Upvotes: 1

Related Questions