Customizing Angular Material Select: A Practical Guide

Angular Material offers a powerful set of UI components that follow modern design principles. One of the most versatile among them is the MatSelect component, used for creating dropdowns. While the default implementation is solid, real-world projects often demand customization to match specific UI/UX or branding requirements.

In this guide, I’ll walk you through how to fully customize Angular Material Select—from styling and templating to adding advanced features like multi-select and error handling.

---

🧱 Step 1: Installing Angular Material

If you haven’t already set up Angular Material in your project, start by running:

ng add @angular/material

Follow the prompts to choose a prebuilt theme, enable typography, and configure animations. This will automatically import the necessary dependencies.

---

📦 Step 2: Import Required Modules

In your AppModule, import the required Angular Material modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MatSelectModule,
    MatFormFieldModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

---

📋 Step 3: Basic MatSelect Usage

Here’s a simple dropdown using Angular Material Select:

<mat-form-field appearance="outline">
  <mat-label>Favorite Food</mat-label>
  <mat-select [(value)]="selectedValue">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

And in the component:

export class AppComponent {
  selectedValue: string;
  foods = [
    { value: 'pizza', viewValue: 'Pizza' },
    { value: 'burger', viewValue: 'Burger' },
    { value: 'sushi', viewValue: 'Sushi' }
  ];
}

---

🎨 Step 4: Customizing Styles

To apply custom styling, you’ll often need ::ng-deep to override Angular Material’s encapsulated styles.

Example: Change background color and arrow style:

::ng-deep .mat-select {
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 8px;
}

::ng-deep .mat-select-arrow {
  color: #10b981;
}

Note: While ::ng-deep is deprecated, it’s still the most reliable method for deep styling Angular Material components until full support for CSS Shadow Parts is standardized.

---

🖼️ Step 5: Custom Option Templates

Want to go beyond plain text in your options? You can create richer UI using custom HTML inside mat-option.

<mat-select>
  <mat-option *ngFor="let food of foods" [value]="food.value">
    <div class="custom-option">
      <img src="/assets/icons/{{ food.value }}.png" class="option-icon" />
      <span>{{ food.viewValue }}</span>
    </div>
  </mat-option>
</mat-select>

Add styling:

.custom-option {
  display: flex;
  align-items: center;
}

.option-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

---

❗ Step 6: Handling Error States

You can easily integrate validation with Angular forms. Here’s how to show an error message if nothing is selected:

<mat-form-field appearance="outline">
  <mat-label>Favorite Food</mat-label>
  <mat-select [(ngModel)]="selectedValue" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="!selectedValue">Please select a food</mat-error>
</mat-form-field>

---

🔢 Step 7: Enable Multi-Select with Custom Chips

Angular Material also supports multi-select out of the box. Just add the multiple attribute:

<mat-form-field appearance="outline">
  <mat-label>Favorite Foods</mat-label>
  <mat-select [(value)]="selectedValues" multiple>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

And in the component:

selectedValues: string[] = [];

You can further enhance this by customizing how selected items are displayed using mat-select-trigger if needed.

---

✅ Final Thoughts

Customizing Angular Material Select gives you complete control over how your dropdowns behave and appear. From simple style tweaks to advanced templating and validation, the flexibility is impressive.

By combining Material’s robust API with thoughtful customization, you can create dropdown components that truly align with your design and UX goals—without reinventing the wheel.