Angular mat-select drop down returns an undefined value

Question

HTML:

<mat-form-field>
    <mat-select placeholder="Section Types"(selectionChange)="selectSectionType($event)" disableRipple>
<mat-option *ngFor="let type of sectionTypes" [value]="type.value">
              {{type.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>

TS:

sectionTypes: DropDown[] = [
    {value: '0', viewValue: 'Horizontal'},
    {value: '1', viewValue: 'Vertical'}
  ];

selectSectionType(event: any){
    console.log("section type: " + event.target.value);
  }

When i select a value from the mat-select dropdown, the method selectSectionType is entered but event.target.value returns undefined. I wonder why.

Thank you for any help

Answer 1

Selected value:

selectSectionType(event: any){
    console.log("section type: " + event.value);
}

OR

event.source.value

You have an object MatSelect 

event.source.MatSelect