Mat-option class is not added to the mat-option element

[milone97]

Bug, feature request, or proposal:

mat-form-field
mat-select placeholder="Not Working"
mat-option class="food-{{ food.value }}" *ngFor="let food of foods" [value]="food.value"
{{food.viewValue}}
mat-option
mat-select
mat-form-field

What is the expected behavior?

La classe "mat-option" viene aggiunta all'elemento "mat-option".

What is the current behavior?

If I add a class to the dynamically composed "mat-option" element, the "mat-option" class is not added to the element.

What are the steps to reproduce?

angular-material2-issue.zip

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: v6
Material: v6.4.7
Google Chrome: V70.0.3538.102 64 bit

[crisbeto]

By setting class="food-{{ food.value }}", you overwrite all the classes that are set by Material. You should use ngClass to set your custom class while preserving the Material ones: [ngClass]="'food-' + food.value".

[milone97]

@crisbeto Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}