Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

621
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda