Dynamic CSS on ion-option element

@aidanpine wrote:

I am using the ion-select component from Ionic (v3). I would like to “indent” or apply margin-left: 30px; to some of the items in the list. The items in the list that I would like to apply the style to start with a hyphen '-' . But, when I add any classes to the ion-option , they get removed when Ionic creates the element.

I’ve tried using [ngClass] and [class] , but any classes I add just get removed. I’ve tried wrapping the ion-option in a div and adding the style to that, and that also gets removed (as does the whole container div)

Here is my source html:

 <ion-select mode="ios"[selectOptions]="categorySelectOptions">
    <ion-option *ngFor='let category of displayCategories'>
        {{category}}
    </ion-option>
 </ion-select>

Here is the output element I currently get in the browser. I would like to be able to apply a class to the button element dynamically based on the category value in the inner html of the ion-option element above.

<button class="alert-tappable alert-radio alert-radio-button alert-radio-button-md alert-radio-button-default alert-radio-button-default-md" ion-button="alert-radio-button" role="radio" aria-checked="false" id="alert-input-0-3">
    <span class="button-inner">
        <div class="alert-radio-icon">
            <div class="alert-radio-inner">
            </div>
        </div>
        <div class="alert-radio-label">
            - birds
        </div>
    </span>
<div class="button-effect"></div>
</button>

Posts: 1

Participants: 1

Read full topic