Angular 2 Dropdown option format part of the string

Question

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.

I am using that as an example, we need it to be spaced out neatly, with the code part , tabbed , maybe twice, the company part and the color part. — KudmiSubba
– KudmiSubba, Commented Dec 14, 2017 at 15:35

KudmiSubba · Accepted Answer · 2017-12-14 15:37:46Z

1

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>

edited Dec 14, 2017 at 15:37

KudmiSubba

692 silver badges9 bronze badges

answered Dec 14, 2017 at 15:17

Fishdigger

891 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KudmiSubba Over a year ago

Sir, Thank you. Let me try that. I also want to share with you, that the content ( strings ) come from an angular Array which has the three parts separated by a space. So I can manipulate the array elements and split them into these three span classes.

KudmiSubba Over a year ago

Sir, I tried it, it did not work inside of <option>. It does nothing to format the string. Also I found this stackoverflow link, can you please advise. stackoverflow.com/questions/5678760/…

Fishdigger Over a year ago

Please see this link: stackoverflow.com/a/27514262/9016532 it details how to add style to options. I wasn't aware that option tags didn't pay attention to other tags within them.

KudmiSubba Over a year ago

Sir, Thank you, I will investigate , there is a fiddler as well to test it out.

Collectives™ on Stack Overflow

Angular 2 Dropdown option format part of the string

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related