I use PrimeNG v5 and I want to translate the oprions of a dropdown.
this.sortOptions = [
{ label: 'All', value: 'name' },
{ label: 'Enabled', value: '!enabled' },
{ label: 'Not enabled', value: 'enabled' }
];
How can I translate the labels?
Translate dropdown options
-
- Posts: 2
- Joined: 08 May 2018, 14:25
If you use ngx-translate:
1. You have to write your tranlsation keys in your options variable:
this.sortOptions = [
{ label: 'TRANSLATE.FOO', value: 'name' },
{ label: 'TRANSLATE.BOO': '!enabled' },
{ label: 'TRANSLATE.KOO', value: 'enabled' }
];
2. Templating your p-dropDown
<p-dropdown
[(ngModel)]="choosedOption"
[options]="sortOptions ">
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template let-selectedItem pTemplate="selectedItem">
{{item.selectedItem | translate}}
</ng-template>
</p-dropdown>
1. You have to write your tranlsation keys in your options variable:
this.sortOptions = [
{ label: 'TRANSLATE.FOO', value: 'name' },
{ label: 'TRANSLATE.BOO': '!enabled' },
{ label: 'TRANSLATE.KOO', value: 'enabled' }
];
2. Templating your p-dropDown
<p-dropdown
[(ngModel)]="choosedOption"
[options]="sortOptions ">
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template let-selectedItem pTemplate="selectedItem">
{{item.selectedItem | translate}}
</ng-template>
</p-dropdown>
-
- Posts: 2
- Joined: 08 May 2018, 14:25
If you use ngx-translate:
1. You have to write your tranlsation keys in your options variable:
this.sortOptions = [
{ label: 'TRANSLATE.FOO', value: 'name' },
{ label: 'TRANSLATE.BOO': '!enabled' },
{ label: 'TRANSLATE.KOO', value: 'enabled' }
];
2. Templating your p-dropDown
<p-dropdown
[(ngModel)]="choosedOption"
[options]="sortOptions ">
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template let-selectedItem pTemplate="selectedItem">
{{item.selectedItem | translate}}
</ng-template>
</p-dropdown>
1. You have to write your tranlsation keys in your options variable:
this.sortOptions = [
{ label: 'TRANSLATE.FOO', value: 'name' },
{ label: 'TRANSLATE.BOO': '!enabled' },
{ label: 'TRANSLATE.KOO', value: 'enabled' }
];
2. Templating your p-dropDown
<p-dropdown
[(ngModel)]="choosedOption"
[options]="sortOptions ">
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template let-selectedItem pTemplate="selectedItem">
{{item.selectedItem | translate}}
</ng-template>
</p-dropdown>
-
- Posts: 5
- Joined: 10 Mar 2020, 06:47
<p-dropdown [(ngModel)]="type" [options]="dropdownType ">
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template pTemplate="selectedItem" let-item>
{{item.label | translate}}
</ng-template>
</p-dropdown>
<ng-template pTemplate="item" let-item>
{{item.label | translate}}
</ng-template>
<ng-template pTemplate="selectedItem" let-item>
{{item.label | translate}}
</ng-template>
</p-dropdown>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest