title: Angular(9) Material - span element not receiving value from mat-option
body: <p>I'm working on a project which implements a custom component to implement <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">Angular Material's <code>mat-select</code></a>. The problem is even though the data/value for select options (<code>mat-option</code>) is getting populated correctly in the business logic (.ts file), somehow the <code>span</code> element seems to be empty, which in turn causes the dropdown to be rendered blank.</p>
  
  <pre><code>&lt;mat-option ... ng-reflect-value="correct value"&gt;
    &lt;span class="mat-option-text"&gt; &lt;/span&gt;
  &lt;/mat-option&gt;
  </code></pre>
  
  <p>While the value for this particular option shows up correctly in the <code>ng-reflect-value</code> attribute of the <code>mat-option</code> element, the <code>span</code> which is supposed to render the text for the option is empty.</p>
  
  <p>Would appreciate any help.
  PS: I'm using shared multi select component.</p>
  
  <hr>
  
  <p>EDIT - Here are some relevant snippets -</p>
  
  <ol>
  <li>This is the template of the custom (reusable) component that has been created to implement Angular material's <code>mat-select</code>. It is also being used by other components, and works correctly there. Notice that <code>mat-option</code> here does use <code>value</code> for bind.</li>
  </ol>
  
  <p><strong>multiselect.component.html</strong></p>
  
  <pre><code>&lt;mat-form-field appearance="outline"&gt;
    &lt;mat-select [formControl]="optionMultiCtrl" [multiple]="enableCheckbox" (selectionChange)="changeDD(multiSelect)" disableOptionCentering #multiSelect&gt;
      &lt;ngx-mat-select-search 
                            [showToggleAllCheckbox]="enableCheckbox" 
                            (toggleAll)="toggleSelectAll($event)" 
                            [formControl]="optionMultiFilterCtrl"
                            noEntriesFoundLabel="No matches found"
                            placeholderLabel=''
                            &gt;&lt;/ngx-mat-select-search&gt;
      &lt;mat-option *ngFor="let option of filteredMultiOptions | async" [value]="option"&gt;
        {{option.name}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
    &lt;mat-error *ngIf="!optionMultiCtrl.valid &amp;&amp; optionMultiCtrl.touched"&gt;
      {{ariaLabel}} can not be blank
    &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <hr>
  
  <ol start="2">
  <li>This is the component I'm currently working on. The <code>&lt;app-multi-select&gt;</code> selector refers to the template of the component I described above. The options for the select does correctly get populated (verified by <code>console.log()</code>) in the property-binded variable <code>[data]</code>.</li>
  </ol>
  
  <p><strong>summary.component.html</strong></p>
  
  <pre><code> &lt;div class="col-md-4 col-sm-12"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-4"&gt;&lt;b&gt;Plan : &lt;/b&gt;&lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;app-multi-select [data]="Plan" [optionMultiCtrl]="PlanType" (changeDropdown)="onChangeFeatureType($event)"&gt;&lt;/app-multi-select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <ol start="3">
  <li>This is the relevant TypeScript code for this component. </li>
  </ol>
  
  <p><strong>summary.component.ts</strong></p>
  
  <pre><code>PlanType: FormControl = new FormControl('');
  
   onChangeFeatureType = (event: Event) =&gt; {
          console.log(event.target);// this comes out to be "undefined"
          this.loadData();
      }
  </code></pre>