Angular(9) Material - span element not receiving value from mat-option

Question

I'm working on a project which implements a custom component to implement Angular Material's mat-select. The problem is even though the data/value for select options (mat-option) is getting populated correctly in the business logic (.ts file), somehow the span element seems to be empty, which in turn causes the dropdown to be rendered blank.

<mat-option ... ng-reflect-value="correct value">
  <span class="mat-option-text"> </span>
</mat-option>

While the value for this particular option shows up correctly in the ng-reflect-value attribute of the mat-option element, the span which is supposed to render the text for the option is empty.

Would appreciate any help. PS: I'm using shared multi select component.

EDIT - Here are some relevant snippets -

This is the template of the custom (reusable) component that has been created to implement Angular material's mat-select. It is also being used by other components, and works correctly there. Notice that mat-option here does use value for bind.

multiselect.component.html

<mat-form-field appearance="outline">
  <mat-select [formControl]="optionMultiCtrl" [multiple]="enableCheckbox" (selectionChange)="changeDD(multiSelect)" disableOptionCentering #multiSelect>
    <ngx-mat-select-search 
                          [showToggleAllCheckbox]="enableCheckbox" 
                          (toggleAll)="toggleSelectAll($event)" 
                          [formControl]="optionMultiFilterCtrl"
                          noEntriesFoundLabel="No matches found"
                          placeholderLabel=''
                          ></ngx-mat-select-search>
    <mat-option *ngFor="let option of filteredMultiOptions | async" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="!optionMultiCtrl.valid && optionMultiCtrl.touched">
    {{ariaLabel}} can not be blank
  </mat-error>
</mat-form-field>

This is the component I'm currently working on. The <app-multi-select> selector refers to the template of the component I described above. The options for the select does correctly get populated (verified by console.log()) in the property-binded variable [data].

summary.component.html

 <div class="col-md-4 col-sm-12">
                        <div class="row">
                            <div class="col-md-4"><b>Plan : </b></div>
                            <div class="col-md-6">
                                <app-multi-select [data]="Plan" [optionMultiCtrl]="PlanType" (changeDropdown)="onChangeFeatureType($event)"></app-multi-select>
                            </div>
                        </div>
                    </div>

This is the relevant TypeScript code for this component.

summary.component.ts

PlanType: FormControl = new FormControl('');

 onChangeFeatureType = (event: Event) => {
        console.log(event.target);// this comes out to be "undefined"
        this.loadData();
    }

you have provide more code, we don't have a crystal ball – Rachid O Jun 11 '20 at 03:56 — Rachid O, Jun 11 '20 at 03:56
You should provide stackblitz of your code – Yogesh Aggarwal Jun 11 '20 at 03:58 — Yogesh Aggarwal, Jun 11 '20 at 03:58
You forgotten to add value into the span, try `{{value}}` – Kaustubh Khare Jun 11 '20 at 04:01 — Kaustubh Khare, Jun 11 '20 at 04:01

score 0 · Answer 1 · answered Jun 11 '20 at 07:01

0

In your code, you're not providing any value to the span element.

<mat-option ... ng-reflect-value="correct value">
  <span class="mat-option-text">{{ value }}</span>
</mat-option>

answered Jun 11 '20 at 07:01

Yogesh Aggarwal

1,071
2
12
30

Angular(9) Material - span element not receiving value from mat-option

1 Answers1