When using a dropdown menu, I want to retrieve both the value and text of the selected option.
Underneath the dropdown menu, I aim to display values in the format of "options: 'value' - 'selected option'".
component.html
<mat-form-field class="week" appearance="outline">
<mat-select
[(value)]="EndsofMonth"
(selectionChange)="selectedValue($event)"
>
<mat-option
*ngFor="let week of endsofmonth"
[value]="week.text"
>
{{ week.text}}
</mat-option>
</mat-select>
</mat-form-field>
The cycle runs from {{ selectedData.value}} to {{ selectedData.text }}
component.ts
EndsofMonth = 'Last day of the month';
selectedData: { value: string; text: string } = {
value: '1st',
text: 'Last day of the month '
};
selectedValue(event: MatSelectChange) {
this.selectedData = {
value: event.value,
text: event.source.triggerValue
};
console.log(this.selectedData);
}
endsofmonth = [
{ value: '2nd', text: '1st of the month' },
{ value: '3rd', text: '2nd of the month' },
...
{ value: '31st', text: '30th of the month'},
];
For example: If I choose the 30th of the month from the dropdown, the displayed selection should be "selected cycle 31st - 30th of the month"