title: How to get value from dropdownlist from backend in Angular template
body: <p>I have a angular 8 application and a dropdown with two values: </p>
  
  <p>on the backend the names of the two values are: Invited and Registerd.</p>
  
  <p>but in the frontend they are called: Open en afgerond:</p>
  
  <pre><code>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: []
    };
  
  </code></pre>
  
  <p>And I have a api call like this:</p>
  
  <pre><code>filerByRegistration() {
      console.log(
        this.participantService
          .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D"))
          .subscribe(filterByRegistration =&gt; {
            // 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);
          })
      );
    }
  
  </code></pre>
  
  <p>The template of the component looks like this:</p>
  
  <pre><code>&lt;div
    class="filter-plus mat-elevation-z8"
    [ngClass]="{ expanded: searchExpanded }"
  &gt;
    &lt;div class="filter-plus-search-fields"&gt;
      &lt;div class="search-types"&gt;
        &lt;mat-radio-group&gt;
          &lt;mat-radio-button
            *ngFor="let option of searchOptions"
            [value]="option"
            (change)="setSelectedSearchOptions(option.label)"
          &gt;
            {{option.label}}
          &lt;/mat-radio-button&gt;
        &lt;/mat-radio-group&gt;
      &lt;/div&gt;
      &lt;div class="search-selects"&gt;
        &lt;div
          class="search-select searchstatus"
          *ngIf="selectedSearch &amp;&amp; hasStatusOptions(selectedSearch)"
        &gt;
          &lt;mat-select placeholder="Status" name="option"&gt;
            &lt;mat-option
              *ngFor="let option of getStatusOptions(selectedSearch)"
              [value]="option"
            &gt;
              {{ option }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/div&gt;
        &lt;div
          class="search-select searchoptions"
          *ngIf="selectedSearch &amp;&amp; hasOtherOptions(selectedSearch)"
        &gt;
          &lt;mat-select placeholder="Opties" name="option"&gt;
            &lt;mat-option
              *ngFor="let option of getOtherOptions(selectedSearch)"
              [value]="option"
            &gt;
              {{ option }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div&gt;
        &lt;mat-form-field  class="search-field-input"&gt;
          &lt;input matInput [matDatepicker]="picker1" placeholder="start datum" [(ngModel)]="startDate"  /&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="picker1"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #picker1&gt;&lt;/mat-datepicker&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class="extended-search-actions"&gt;
        &lt;button
        mat-raised-button
        color="warn"
        class="Button"
        (click)="closeSearch()"
        &gt;
        Annuleer
      &lt;/button&gt;
      &lt;button mat-raised-button color="secondary" class="Button"&gt;
        Clear
      &lt;/button&gt;
      &lt;button
        mat-raised-button
        color="accent"
        class="Button"
        (click)="searchFor()"
      &gt;
        Filter
      &lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;button
      mat-raised-button
      class="extended-search-close"
      (click)="closeSearch()"
      *ngIf="searchExpanded"
    &gt;
      &lt;mat-icon&gt;
        clear
      &lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>So my question is how to return the selected value from the dropdoownlist in the api call?</p>
  
  <p>So this line:</p>
  
  <pre><code>  .filterParticipantsByRegistration(1, this.statusOptions['Invited'], moment(this.startDate).format("YYYY MM D"))
  </code></pre>
  
  <p>Then it is about this piece of code:</p>
  
  <pre><code>this.statusOptions['Invited']
  </code></pre>
  
  <p>Thank you</p>
  
  <p>for example if I do this:</p>
  
  <pre><code>  .filterParticipantsByRegistration(1, 'Invited', moment(this.startDate).format("YYYY MM D"))
  </code></pre>
  
  <p>Then it works, but of course that is hardcoded</p>
  
  <p>I have it now like  this:</p>
  
  <pre><code> Registratie: [ { status: 'Open', apiStatus: 'Invited' },
      { status: 'Afgerond', apiStatus: 'Registerd' }],
  
  </code></pre>
  
  <pre><code>filerByRegistration() {
      console.log(
        this.participantService
          .filterParticipantsByRegistration(1, (this.selectedValue as any), moment(this.startDate).format('YYYY MM D'))
          .subscribe(filterByRegistration =&gt; {
           console.log('selected values',  this.selectedValue  );        
            this.statusOptions[''] = filterByRegistration;
            this.filterparticipantByRegistration.emit(filterByRegistration);
          })
      );
    }
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>   &lt;div
          class="search-select searchoptions"
          *ngIf="selectedSearch &amp;&amp; hasOtherOptions(selectedSearch)"
        &gt;
          &lt;mat-select placeholder="Opties" name="option"  &gt;
            &lt;mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus"   &gt;
              {{ option.status }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/div&gt;
  
  </code></pre>
  
  <p>ah, oke, I changed this:</p>
  
  <pre><code> &lt;mat-select placeholder="Status" name="option" [(ngModel)] = "selectedValue" &gt;
            &lt;mat-option
              *ngFor="let option of getStatusOptions(selectedSearch)"
              [value]="option.apiStatus"
            &gt;
              {{ option.status }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
  </code></pre>