CODEWITHSUNDEEP
htmlcssangular
dangerisgo
dangerisgo

Reputation: 1271

Dynamically appending symbol to drop down option

I have a dropdown on my page that I'd like to dynamically append a check mark next to each option if certain circumstances are met. When I have tried the following:

<select>
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span class="fa fa-check"></span></option>
  </select>

This did not work. Nothing was appended onto the option. I have even tried a regular character:

<select>
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span>X</span></option>
  </select>

To no avail. Even though that particular request was a customer requirement, I attempted the following to provide an alternate solution:

<select>
    <option *ngFor="let cl of classes; trackBy id" [ngClass]="{'is-active':cl.selectedStudent=true}">{{cl.label}}</option>
  </select>

.is-active {
  background-color: yellow;
}

It would highlight the option yellow. This didn't work either. Then I finally tried just to get a drop down option to highlight with inline styling:

<select>
    <option *ngFor="let cl of classes; trackBy id" style="background:yellow;">{{cl.label}}</option>
  </select>

This didn't work either. No matter what I did, I was unable to provide any sort of styling to the dropdown. Is there something that I am missing or are you unable to style drop down options? I am using Chrome on MacOS.

Upvotes: 2

Views: 113

Answers (2)

Kevin
Kevin

Reputation: 847

Inside your option I would use <span *ngIf="cl.selectedStudent == true" class="fa fa-check"></span> like:

<select>
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span *ngIf="cl.selectedStudent == true" class="fa fa-check"></span></option>
  </select>

I'd also ask myself if using trackBy is really necessary

Upvotes: 0

A. Tim
A. Tim

Reputation: 3206

You cannot use innerHtml tags inside of <options> tag. But solution with alternative color should work. In your particular example, you have typo (1 equals sign), but it highlights only option itself (when options list is expanded) not selected value. You may want to use JS implementation of selectbox. Look for primeNg or ngx-bootstrap as example. But simpliest option is: 

<option>{{cl.label + (cl.selectedStudent == true ? ' &#9745;' : '')}}</option>

https://www.w3schools.com/charsets/ref_utf_symbols.asp

Upvotes: 1

Related Questions