Just starting out with Angular and attempting to implement an Angular Material dropdown menu. My goal is to have it display the months, but when a user clicks on a month, I want to retrieve the month's number so that I can use it as a URL parameter.
This is my current HTML code:
<mat-form-field style="width: 250px;">
<mat-select placeholder="Select a month" #list [(ngModel)]="selectedOptions" name="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-option *ngFor="let month of months" (mat-option)="onUpdate($event)" [value]="month.viewValue" >
{{ month.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
In my component:
protected months = [
{value: '0', viewValue: 'January'},
{value: '1', viewValue: 'February'},
{value: '2', viewValue: 'March'},
{value: '3', viewValue: 'April'},
{value: '4', viewValue: 'May'},
{value: '5', viewValue: 'June'},
{value: '6', viewValue: 'July'},
{value: '7', viewValue: 'August'},
{value: '8', viewValue: 'September'},
{value: '9', viewValue: 'October'},
{value: '10', viewValue: 'November'},
{value: '11', viewValue: 'December'}
];
onNgModelChange(event: Event) {
console.log(event);
}
I am able to retrieve the viewValue when clicking on the select, but I'm having trouble getting the value parameter (the number). Is there a way for me to achieve this?
For instance, I would like to get the number "1" when the user selects "February".