CODEWITHSUNDEEP
angulartypescriptangular8
Memmo
Memmo

Reputation: 268

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

Upvotes: 0

Views: 1178

Answers (2)

R0b1n
R0b1n

Reputation: 593

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

Upvotes: 1

Memmo
Memmo

Reputation: 268

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

Upvotes: 0

Related Questions