How to get value from dropdownlist from backend in Angular template

Question

I have a angular 8 application and a dropdown with two values:

on the backend the names of the two values are: Invited and Registerd.

but in the frontend they are called: Open en afgerond:

public statusOptions = {
    Registratie: ["Open", "Afgerond"],
    VCheq: ["Ongeopend", "Open", "Afgerond", "Verlopen"],
    Doelen: ["Tussentijds doel behaald", "Geen data sinds", "Eind doel behaald"],
    Qrcode: ["Gescanned", "Niet gescanned"],
    Inlog: [],
    Chat: []
  };

And I have a api call like this:

filerByRegistration() {
    console.log(
      this.participantService
        .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D"))
        .subscribe(filterByRegistration => {
          // this.startDate = filterRegistration.start.value;
          this.statusOptions[''] = filterByRegistration;
          console.log(this.otherOptions['Invited'] = filterByRegistration);
          this.filterparticipantByRegistration.emit(filterByRegistration);
          console.log(this.startDate.toString());
          console.log(filterByRegistration);
        })
    );
  }

The template of the component looks like this:

<div
  class="filter-plus mat-elevation-z8"
  [ngClass]="{ expanded: searchExpanded }"
>
  <div class="filter-plus-search-fields">
    <div class="search-types">
      <mat-radio-group>
        <mat-radio-button
          *ngFor="let option of searchOptions"
          [value]="option"
          (change)="setSelectedSearchOptions(option.label)"
        >
          {{option.label}}
        </mat-radio-button>
      </mat-radio-group>
    </div>
    <div class="search-selects">
      <div
        class="search-select searchstatus"
        *ngIf="selectedSearch && hasStatusOptions(selectedSearch)"
      >
        <mat-select placeholder="Status" name="option">
          <mat-option
            *ngFor="let option of getStatusOptions(selectedSearch)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-select>
      </div>
      <div
        class="search-select searchoptions"
        *ngIf="selectedSearch && hasOtherOptions(selectedSearch)"
      >
        <mat-select placeholder="Opties" name="option">
          <mat-option
            *ngFor="let option of getOtherOptions(selectedSearch)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-select>
      </div>
    </div>


    <div>
      <mat-form-field  class="search-field-input">
        <input matInput [matDatepicker]="picker1" placeholder="start datum" [(ngModel)]="startDate"  />
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="extended-search-actions">
      <button
      mat-raised-button
      color="warn"
      class="Button"
      (click)="closeSearch()"
      >
      Annuleer
    </button>
    <button mat-raised-button color="secondary" class="Button">
      Clear
    </button>
    <button
      mat-raised-button
      color="accent"
      class="Button"
      (click)="searchFor()"
    >
      Filter
    </button>
    </div>

  </div>
  <button
    mat-raised-button
    class="extended-search-close"
    (click)="closeSearch()"
    *ngIf="searchExpanded"
  >
    <mat-icon>
      clear
    </mat-icon>
  </button>
</div>

So my question is how to return the selected value from the dropdoownlist in the api call?

So this line:

  .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D"))

Then it is about this piece of code:

this.statusOptions['Invited']

Thank you

for example if I do this:

  .filterParticipantsByRegistration(1, 'Invited', moment(this.startDate).format("YYYY MM D"))

Then it works, but of course that is hardcoded

I have it now like this:

 Registratie: [ { status: 'Open', apiStatus: 'Invited' },
    { status: 'Afgerond', apiStatus: 'Registerd' }],

filerByRegistration() {
    console.log(
      this.participantService
        .filterParticipantsByRegistration(1, (this.selectedValue as any), moment(this.startDate).format('YYYY MM D'))
        .subscribe(filterByRegistration => {
         console.log('selected values',  this.selectedValue  );        
          this.statusOptions[''] = filterByRegistration;
          this.filterparticipantByRegistration.emit(filterByRegistration);
        })
    );
  }

and this:

   <div
        class="search-select searchoptions"
        *ngIf="selectedSearch && hasOtherOptions(selectedSearch)"
      >
        <mat-select placeholder="Opties" name="option"  >
          <mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus"   >
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

ah, oke, I changed this:

 <mat-select placeholder="Status" name="option" [(ngModel)] = "selectedValue" >
          <mat-option
            *ngFor="let option of getStatusOptions(selectedSearch)"
            [value]="option.apiStatus"
          >
            {{ option.status }}
          </mat-option>
        </mat-select>

Answer 1

In your component, you can declare:

  selectedValue: string;

and in your template:

 <mat-select [(ngModel)]="selectedValue"...

for more details: https://stackoverflow.com/a/48705695/7604006

and about the problem with translated value, you need to map it, ex.:

public statusOptions = {
    Registratie: [
                    { status: "Open", apiStatus: "Invited" },
                    { status: "Afgerond", apiStatus: "Registerd" }
                 ],

and use it in template:

<mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
        {{option.status}}
</mat-option>