Use ngx-translate with ng2-select in Angular 5 app - ngx-translate

Question

I want to use ngx-translate for items in ng2-select. The only way I can think of is using the translate service and mutate the items' text in ts file prior to binding.
Is there a way to use pipe or directive as I want to make it consistent.
Thanks in advance.

Answer 1

My solution was to create a pipe and use it on the items of the select:
<ng-select [items]="listOfTimeOfExecution | selectOptionsTranslate" ...
and pipe code:
import { Pipe, PipeTransform } from '#angular/core';
import { TranslateService } from 'ng2-translate/ng2-translate';
import { SelectOption } from 'app/shared/entities';
#Pipe({name: 'selectOptionsTranslate'})
export class SelectOptionsTranslatePipe implements PipeTransform {
constructor(public translateService: TranslateService){}
transform(items: Array<SelectOption>) : Array<SelectOption> {
for(let item of items) {
item.text = this.translateService.instant(item.text);
}
return items;
}
}

Answer 2

My solution is inspired by Iosif's for which I can't make it work properly becuz of the async characteristics of the translateService 😣
Secondly, I also need to translate the options when user changes language.
So here's my solution (I wrote a pipe as well) for handling the above 2 issues:
Dependencies:
Angular 6
"#ng-select/ng-select": "2.5.1",
"#ngx-translate/core": "^10.0.2",
translate-options.pipe.ts (Rmbr to import it to the declaration array of app.module.ts)
// ... Rmbr to import the libs ...
#Pipe({
name: 'translateOptions',
})
export class TranslateOptionsPipe implements PipeTransform, OnDestroy {
constructor(private translateService: TranslateService) { }
transform(items: any) {
const observable = Observable.create(observer => {
this.translateService.get(items).subscribe(result => {
// result will be an object
// e.g. { 'JOBS.UX': 'UX Designer', 'JOBS.DEVELOPER': 'Developer' }
observer.next(result);
});
this.translateService.onLangChange.subscribe(event => {
this.translateService.get(items).subscribe(result => {
observer.next(result);
});
})
});
return observable;
}
ngOnDestroy() {
this.translateService.onLangChange.unsubscribe();
}
}
app.component.html
items in the code below will be an array of your translation keys, something like:
['JOBS.DEVELOPER', 'JOBS.UX', 'JOBS.PM']
<ng-select
[addTag]="true"
[addTagText]="to.addTagText || 'Create item: '"
[multiple]="to.multiple"
[closeOnSelect]="!to.multiple"
(change)="onAutoCompleteChange($event)"
>
<ng-option
*ngFor="let item of items | translateOptions | async | keyvalue"
[value]="item.key"
>
{{ item.value }}
</ng-option>
</ng-select>
Hope that helps 💪🏻

Answer 3

The parent that use dropdown will pass an object typed as following to the dropdown component.
export interface IDropdownOptions {
items: any[];
itemType: 'action' | 'divider';
itemLabel: (item: any) => string;
itemClicked?: (item: any) => void; // overwriting default onChange function
itemVisible?: (item: any) => boolean;
itemSelectable?: (item: any) => boolean;
selectedText: (() => string) | string;
shortSelectedText?: (() => string) | string;
// can define more for styling and custom purposes...
}
Then I have my dropdown component to implements ControlValueAccessor to be available in angular form
import { Component, forwardRef, Input, } from '#angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '#angular/forms';
import { get } from 'lodash';
#Component({
selector: 'c-dropdown',
templateUrl: './dropdown.component.html',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true }]
})
export class DropdownComponent implements ControlValueAccessor {
#Input() options: IDropdownOptions;
onChange: any = () => {};
get itemLabel(): (item: any) => string {
return !!get(this.options, 'itemLabel')
? this.options.itemLabel
: () => '';
}
get itemClicked(): (item: any) => void {
!!get(this.options, 'itemClicked')
? this.options.itemClicked
: this.onChange;
}
// Getter functions for itemSelectable, itemVisible, etc.
constructor() {}
// Other inherited functions...
registerOnChange(fn: any): void {
this.onChange = fn;
}
}
Inside template's for loop, you can use translate pipe with itemLabel(item).