Angular class ng-star-inserted overwrite my class

Question

I have a basic select element. I'm trying to give it a class with some attributes but the problem is that my class is overwritten by an angular class "ng-star-inserted". How can I force the element to take my class? HTML:

<mat-form-field appearance="fill">
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo" [ngClass]="{'test':isBold}">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

CSS:

.test{ //I tried here with ::ng-deep before the class but it's not working
  font-weight: bold;
}

TS:

//...code
isBold:boolean=true; //always true for now

Not sure what's the issue with your code, but does this work for you? ` — JSON Derulo, Nov 12 '21 at 10:36
If that's not working as well... Could you check if `isBold` is available and set to the right value in the HTML? — JSON Derulo, Nov 12 '21 at 10:39
It's not. The issue is that my class is not taken. Like it's not used . If I inspect the element in my browser, doesn't have my class. — anyway07, Nov 12 '21 at 10:39
Yeah then please debug if `isBold` is available. You can just write it somewhere with `{{ isBold }}` — JSON Derulo, Nov 12 '21 at 10:42
https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select You may find this helpful — Akshay Venugopal, Nov 12 '21 at 11:38
What do you want exactly? Do you want text to be bolded after option is selected, or during the dropdown display? — NeNaD, Dec 07 '21 at 16:44

score 0 · Answer 1 · answered Dec 07 '21 at 16:31

0

Try by adding !important for the compiler to prioritize your code. If it doesn't work, try with ::ng-deep and !important

.test{
   font-weight: bold !important;
}

or

::ng-deep.test{
   font-weight: bold !important;
}

answered Dec 07 '21 at 16:31

Agustin L. Lacuara

199
2
11

Angular class ng-star-inserted overwrite my class

1 Answers1