How to use ng2-completer with translate

Question

i'm new in angular, i try to use the module ng2-completer with TranslateModule.

The problem is when i retreive the JSON from the server-side, The JSON is:

[{"id":10,"tipo":"EUR"},{"id":20,"tipo":"USD"}]

I want to use tipo as value in the tag

<ng2-completer #openCloseSelect
            class="completer-limit"
            [datasource]="dataService4"
            [inputClass]="'form-control'"
            [minSearchLength]="0"
            [openOnFocus]="false"
            [placeholder]="'SCEGLI' | translate"
            [autoHighlight]="true"
            [selectOnClick]="true"
            [fillHighlighted]="false">
 </ng2-completer>

where "dataService4" is initialize in the constructor as

this.dataService4 = completerService.local(this.diviseAzioni, "tipo", "tipo"); //diviseAzioni is list of Objects class DivisaAzioni { id: number; tipo: string;} (the JSON from server-side)

and use the TranslateModule of angular to translate value of tipo.

e.g. EUR: "Euro", USD: "US Dollars" as textLabel of the select.

Thx.

Answer 1

The challenge with this is that you want a different display value from your actual data value (if I'm interpreting your question right).

Looking at the docs for ng2-completer, I don't see a way to do this. Your options seem to be to either:

1) Hack a solution together by modifying the ng2-completer source code (do not recommend)

2) Rewrite your service as follows: When data comes from whatever API it's calling, immediately translate it with the translation module, and only expose the translated value. Whenever you go to save or send values with the service, translate back to the source text. You could speed this up with a local map so you don't have to make a network call for the reverse translation.

3) Use mat-autocomplete. You can include just the component you need, though it will still be pretty heavy. However, it has functionality for exactly this: https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values