CODEWITHSUNDEEP
htmlangular
KudmiSubba
KudmiSubba

Reputation: 69

Angular 2 Dropdown option format part of the string

We have a requirement where the dropdown option list has three parts.

1 - A code part like , 1 , 2 , 2c, 3, 3d etc.

2 - A company name part , like Columbia Water

3 - A color part, like Green, Orange etc.

I want to change the format of the text partially inside the string.

**2c**          Columbia Water             Green

I have tried this :-

<div>
<select> <!--[ngStyle]="{'color': 'black','font-size': '20px','font-weight': 'bold'}"-->
  <option>
  <li><font color="black"><b>2c</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Columbia Water&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="green">Green</font></li>
</option>        
</select>

If I put the ngStyle portion in the tag, only the selected dropdown will be formatted , and that too the entire string. The same goes for option, the entire string is formatted. I tried putting li inside of option, but that does not do anything to the string itself.

Is this possible at all, this will be very useful as this will run on android as a hybrid cordova app.

Upvotes: 0

Views: 345

Answers (1)

Fishdigger
Fishdigger

Reputation: 89

Use a span tag on each of the options and style appropriately in CSS.

    <span class='part-code'>2c</span> 
    <span class='company-name'>Columbia Water</span> 
    <span class='part-color'>Green</span>

Upvotes: 1

Related Questions