How to get the value and the text in an Angular Material mat-select by using *ngFor?

Question

I need to get the value and text by selecting the options from dropdown.

dropdown image

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

Answer 1

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 }}