Получить выбранное значение ng-select - Angular8

Question

Я новичок с Angular 8.
Я создал следующее выпадающее меню в компоненте, который очень хорошо работает для меня:

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

Теперь я хотел бы знать, как Я могу получить выбранный элемент в файле ts того же компонента.
Заранее спасибо.

Answer 1

Вы можете использовать событие change для захвата выбранного значения.

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

<!-- Component ts file -->

changeFn(val) {
     console.log(val);
}

Answer 2

Добавьте атрибут [(ngModel)] к атрибутам ng-select и передайте его значение для запуска.

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

Затем в файле ts:

export class myComponent {

    public val: string;

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