Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

619
Views
Angular Material - mat-select stopped working for no apparent reason

I have a mat-select component in one of my components as follows

<div id="graph-textbox">
    <input type="textbox" class="form-control" [(ngModel)]="graph1_query"
      placeholder="Search for Entities/Relations"
      (keyup)="EnterKeyupChecker('graph-search',$event)"
    >
</div>
<div style="padding-right: 5px" class="graph-dropdown">
    <mat-form-field appearance="fill" style="width: 100%;">
        <mat-label>Select Type</mat-label>
        <mat-select [(ngModel)]="graph1_type_query"
          (selectionChange)="graph1_subtype_query='';InGraph1Search();"
        >
            <mat-option value="">None</mat-option>
            <mat-option *ngFor="let type of type_dropdown" [value]="type">
                {{type}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

This mat-select was working perfectly till yesterday, showing the options and even performing the selection actions. When I began work on my Angular app today, it shows no options, and just highlights the mat-label when I click it. Absolutely nothing was changed in the code.

The value of graph1_type_query is '' on declaration in the .ts file and is not touched after that throughout the code. The value of graph1_query is working as intended.

What I've come across so far:

  1. Using [(value)] instead of [(ngModel)]. Made no difference.
  2. Checking that my type_dropdown array is actually populated. Logged it to the console as well as printed out the entire array in p tags (with the same ngFor loop) and it works, even changing along with the text input value (graph1_query) as intended.
  3. I even replaced the mat-select with a simple example of mat-select but even this does not show any options.
<mat-select [(ngModel)]="graph1_type_query">
    <mat-option value="">None</mat-option>
    <mat-option value="One">One</mat-option>
    <mat-option value="Two">Two</mat-option>
    <mat-option value="Three">Three</mat-option>
</mat-select>
  1. Checking compatibility of Angular and Angular Material
    angular/core: 12.2.2
    angular/material: 12.2.2
    Also tried material versions 11.2.13 and 12.2.5
  2. Using the placeholder attribute
  3. Check if MatSelectModule has be imported in the App module file. I have other working mat-select components with similar code.

UPDATE: It work perfectly fine with native select. What could the issues with mat-select be?

over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!