Search code examples
angularprimengngx-translate

PrimeNG DropDown Placeholder not working with translate upon refresh

I have a PrimeNG Drop-Down control with a placeholder that uses a translate pipe. When I load the view initially, the placeholder is displayed as expected. However, when I refresh the page, the drop down always shows the drop down with the first option selected. I tried to move the translation into the code and used the variable via data-binding but in that case, the placeholder will display the translate label only. The only thing that works, is not using any translation. In that case, the placeholder is displayed even after page refresh.

HTML:

<p-dropdown [options]="myOptions" [(ngModel)]="option" placeholder="{{ 'LABEL' | translate }}" optionLabel="name"></p-dropdown>

Angular:

myOptions: MyOptions[];
option: string;

ngOnInit(): void { 
 this.myOptions:  = [
  { name: 'options1' },
  { name: 'option2' },
  { name: 'option3' }
];
Solution

  • Try to set autoDisplayFirst option to false, to prevent this behavior, because the dropdown may be initialized before getting the proper translation.

    autoDisplayFirst:

    Whether to display the first item as the label if no placeholder is defined and value is null.