Pass two parameters to ng model - Typescript

Question

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">
</ng-select>

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...!

For your model, you need to handle the translation inside your TypeScript code. — Arpit Kumar
– Arpit Kumar, Commented Jan 21, 2020 at 10:26
It's already done. I just have to figure out how to pass two translatable parameters instead of one... — Memmo
– Memmo, Commented Jan 21, 2020 at 10:28
You can't, if you are updating the model then what is the need for two parameters? — Arpit Kumar
– Arpit Kumar, Commented Jan 21, 2020 at 10:31
If you are setting the same values in both variables you can make them as a single variable. or you can use the (change) function to set multiple variables — Gokul Sridhar
– Gokul Sridhar, Commented Jan 21, 2020 at 11:03

R0b1n · Accepted Answer · 2021-03-15 12:08:26Z

1

Actually | translate is a pip. Your ng model is has a two way binding. So you cant dotwo way binding with a pip. You have to break it into two parts.

Model to view binding
ngModelChange

Here is some example - > https://stackblitz.com/edit/angular-tn9cbn?embed=1&file=src/app/app.component.ts&view=preview

edited Mar 15, 2021 at 12:08

answered Jan 21, 2020 at 11:02

R0b1n

6032 gold badges7 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Memmo · Accepted Answer · 2020-02-20 11:27:23Z

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 ... -->

</ng-select>

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 
    }
}

Collectives™ on Stack Overflow

Pass two parameters to ng model - Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related