I need to get the value and text by selecting the options from dropdown .
below the dropdown , I need to get values like "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>
Cycle runs {{ selectedData.value}} - {{ 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: '4th', text: '3rd of the month' },
{ value: '5th', text: '4th of the month' },
{ value: '6th', text: '5th of the month' },
{ value: '7th', text: '6th of the month' },
{ value: '8th', text: '7th of the month' },
{ value: '9th', text: '8th of the month' },
{ value: '10th', text: '9th of the month' },
{ value: '11th', text: '10th of the month' },
{ value: '12th', text: '11th of the month' },
{ value: '13th', text: '12th of the month' },
{ value: '14th', text: '13th of the month' },
{ value: '15th', text: '14th of the month' },
{ value: '16th', text: '15th of the month' },
{ value: '17th', text: '16th of the month' },
{ value: '18th', text: '17th of the month' },
{ value: '19th', text: '18th of the month' },
{ value: '20th', text: '19th of the month' },
{ value: '21st', text: '20th of the month' },
{ value: '22nd', text: '21st of the month' },
{ value: '23rd', text: '22nd of the month' },
{ value: '24th', text: '23rd of the month' },
{ value: '25th', text: '24th of the month' },
{ value: '26th', text: '25th of the month' },
{ value: '27th', text: '26th of the month' },
{ value: '28th', text: '27th of the month' },
{ value: '29th', text: '28th of the month' },
{ value: '30th', text: '29th of the month' },
{ value: '31st', text: '30th of the month' },
{ value: '1st', text: 'Last day of the month' },
];
for example: I have selected 30th of the month from dropdown ,I should have get
selected cycle 31st - 30th of the month
CodePudding user response:
The error is happening because you are using the wrong variable for the value:
<mat-form-field class="week" appearance="outline">
<mat-select
[(value)]="EndsofMonth"
(selectionChange)="selectedValue($event)"
>
<mat-option
*ngFor="let week of endsofmonth"
[value]="week.value". // <--- CHANGE HERE!!
>
{{ week.text}}
</mat-option>
</mat-select>
</mat-form-field>
Cycle runs {{ selectedData.value}} - {{ selectedData.text }}