Most commonly you would set the mat-option text in a way like this. <mat-option [value]="type.key">{{ type.value }}</mat-option> The thing is I have a directive that processes the string, before setting it on the element's inner text. Which overrides the HTML of the mat option. <mat-option [value]="type.key" [appTransform]="type.value"></mat-option> So is there a way to set the interpolated value via the directive? Continue reading...