In Material 17 looks the SelectBox different than in Material 14

Question

i updated Angular v14 to Angular v17.1.x. and Material to v17.2.x Everything works fine, but I have a problem with Material select box. After the update the select box look like this:

But it should be look like this:

There is not error in the browser console. Does anyone have a idea why this might be and what ist going wrong?

interface Food {
 value: string;
 viewValue: string;
}

@Component({

  selector: 'app-dashboard',
  standalone: true,
  styleUrl: './dashboard.component.css',
  templateUrl: './dashboard.component.html',
  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
})
export class DashboardComponent implements OnInit {

foods: Food[] = [
 {value: 'steak-0', viewValue: 'Steak'},
 {value: 'pizza-1', viewValue: 'Pizza'},
 {value: 'tacos-2', viewValue: 'Tacos'},
];

} }

<mat-form-field>
 <mat-label>Favorite food</mat-label>
 <mat-select>
   @for (food of foods; track food) {
     <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
   }
</mat-select>

app.config.ts

export const appConfig: ApplicationConfig = {
 providers: [
    provideAnimations(),
    provideHttpClient(),
    importProvidersFrom(MatNativeDateModule)
 ]
};

Answer 1

When you use a normal select box, it will look like the first screenshot. That is how the styles are configured, maybe in your project some CSS is modifying the select to look different, kindly inspect element the select box and identify which CSS causes this modification.

Default Select Appearance Stackblitz

---

If you want the select box to look like how you want in the screenshot, we need to use the html tags select and option and add the directive matNativeControl to give a similar output like how you want!

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <select matNativeControl>
    @for (food of foods; track food) {
    <option [value]="food.value">{{food.viewValue}}</option>
    }
  </select></mat-form-field
>

stackblitz

Although this stackblitz does not look identical to the expected output, we can add few CSS to achieve the desired effect!

Answer 2

I found the problem, why doesn't work . When you convert a older angular project, and you don't have theme.scss you have to integrate the file to your project. Then it works. THX