There is a customizable customTrigger property available, but I have not been able to locate any documentation regarding the MatSelectTrigger class or how to dynamically generate one.
customTrigger cannot be set directly as it is of type @ContentChild. This means that the mat-select requires content projection of type MatSelectTrigger.
The code snippet below is extracted from the source file:
@ContentChild(MAT_SELECT_TRIGGER) customTrigger: MatSelectTrigger;
Solution
In order to dynamically provide a different template for the mat-select-trigger, you will need to create a wrapper component like so:
mat-select-wrapper.component.html
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-select-trigger>
<!-- NOTE: We inject triggerTemplate into mat-select-trigger -->
<ng-container *ngTemplateOutlet="triggerTemplate"></ng-container>
</mat-select-trigger>
<mat-option *ngFor="let topping of toppingList"
[value]="topping">{{topping}}
</mat-option>
</mat-select>
</mat-form-field>
mat-select-wrapper.component.ts
import {Component, Input, TemplateRef} from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-mat-select-wrapper',
templateUrl: 'mat-select-wrapper.component.html',
styleUrls: ['mat-select-wrapper.component.css'],
})
export class MatSelectWrapperComponent {
// Accept a custom template externally and display it.
@Input()
public triggerTemplate: TemplateRef<any>;
public toppings = new FormControl();
public toppingList = ['Extra cheese', 'Mushroom', 'Onion'];
}
Parent component utilizing the wrapper
<app-mat-select-wrapper [triggerTemplate]="myTemplate"></app-mat-select-wrapper>
<ng-template #myTemplate>
Hello! You can include any HTML content here.
</ng-template>
You may need to incorporate additional @Input fields in order to pass various values through the wrapper and onto the actual mat-select element. For instance, the toppingList utilized by the mat-option.