Analysis and Solution for mat-select Default Value Issue in Angular Material

Problem Background and Phenomenon Analysis

During Angular Material development, the mat-select component, as a commonly used dropdown selection control, often perplexes developers with its default value setting functionality. The specific issue reported by users is: when the options array contains object data, although the selected2 variable is set to point to options2[1].id, the mat-select does not correctly display the default selected item upon page rendering.

There are two key issues in the original code: First, using value="{{ option.id }}" interpolation binding in mat-option, which causes the value attribute to be set as a string rather than a number; Second, using [(value)]="selected2" in mat-select instead of the standard [(ngModel)] two-way binding.

Core Solution

The correct implementation requires modifying two key points in the HTML template simultaneously:

In mat-option, change value="{{ option.id }}" to [value]="option.id". The former uses string interpolation, converting option.id to a string before setting the value attribute; the latter uses property binding, preserving the original data type of option.id (numeric type).

In mat-select, change [(value)]="selected2" to [(ngModel)]="selected2". ngModel is Angular's standard two-way data binding directive, capable of properly handling data synchronization between the component and the model.

The complete corrected code example is as follows:

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

Data Type Matching Principle

The fundamental reason for the default value setting failure lies in data type mismatch. When using value="{{ option.id }}", option.id (numeric 1 or 2) is converted to strings "1" or "2", while the selected2 variable stores the numeric value 2. During comparison, the string "2" does not equal the numeric 2, preventing matching with the default option.

Using [value]="option.id" property binding maintains the original numeric type of option.id, ensuring that selected2 (numeric 2) exactly matches option.id (numeric 2), thereby achieving correct default value setting.

Advanced Usage: Object Comparison

When directly using objects as option values, Angular Material provides the compareWith function to handle object comparison. This method is suitable for complex scenarios requiring object matching based on multiple properties.

Implementation steps include: adding [compareWith]="compareObjects" attribute to mat-select, and defining the corresponding comparison function:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

The corresponding HTML template is adjusted to:

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

Best Practices and Version Adaptation

Starting from Angular Material version 2.0.0-beta.12, it is recommended to use mat-form-field as the parent container for mat-select to maintain consistency with other Material input controls. This layout approach not only provides better visual styling but also ensures uniform behavior of form controls.

The upgraded code structure:

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

Summary and Recommendations

The core of the mat-select default value setting issue lies in ensuring data type consistency for bound values. By correctly using [(ngModel)] and [value] property binding, most default value setting problems can be resolved. For complex object comparison scenarios, the compareWith function provides a flexible solution.

During development, pay attention to differences in Angular Material versions and promptly adopt the latest best practices. Maintaining code standardization and consistency can effectively avoid similar data binding issues, improving development efficiency and code quality.