[Fixed] Pass two parameters to ng model – Typescript


I’m newbie with angular8.
I have the following template:

<label class="pr-1 selectLabel" [title]="'alphOrder' | translate">{{'alphOrder' | translate}}</label>
<ng-select class="w-25 p-3" placeholder="Select" [items]="(sortingField | async)?.alphOrder" [clearable]="false" [(ngModel)]="HERE" (change)="sortBy('titles', HERE)" [searchable]="false">

On the first line I passed a key to [title] with the translate function.
I would like to do the same thing on the second line with [(ng-model)], with the difference of passing two parameters.
Then I would like to pass the same parameters to the sortBy function.
In both circumstances the parameters must have the translate function.
I would like to understand how to write such a thing, since I never know how to behave with the template syntax…!


I turn the problem around according to your needs.
If you don’t have too many elements, you could do something like that in the template (considering that on all the json files of the languages ​​you have put all the same keys):

<ng-select (change)="sortBy(selection)" [(ngModel)]="selection" class="w-25 p-3" placeholder="Select" [clearable]="false" [searchable]="false">
    <ng-option>{{'author' | translate}}</ng-option>
    <ng-option>{{'title' | translate}}</ng-option>
    <ng-option>{{'date' | translate}}</ng-option>

    <!-- and you can continue to unwind elements if there are not too many ... -->


And that’s about the template.

As for the component ts file, you can trigger the selected element like this:

export class myComponent {

    public val: string;

    sortBy(val) {
        console.log("Dropdown selection:", val);

        // do whatever you want with the translatable element 

Leave a Reply

(*) Required, Your email will not be published