How to get drop down text in mat-select using angular 6

Question

Here is is my code HTML:

<mat-list-item class="primary-imenu-item" role="listitem">
    <mat-select class="form-control" multiple formControlName="statusCode" (selectionChange)="getSelectedOptionText($event)">
        <mat-option *ngFor="let list of statusList" [value]="list.id" checkboxPosition="before">
            {{list.code}}
        </mat-option>
    </mat-select>
</mat-list-item>

TS Code:

getSelectedOptionText(event: MatSelectChange) {
    let selectedData = {
        code: (event.source.selected as MatOption).viewValue,
        value: event.source.value
    };

    console.log(selectedData);
}

In that 'selectedData' I am getting the code value is undefined. I need to get code value from dropdown.

Answer 1

The event object has "value" array attribute which will always have one item. So, instead of (event.source.selected as MatOption).viewValue , you can do event.value[0] . Look at the screenshot for more details. Hope it helps.