Issues using dropdown with select instead of hidden input

[smartm0use]

Hello, according to this I can build a dropdown using a div with hidden input or a select with options.

I prefer to use select (even for WCAG reasons) but since I wrap it in an Angular component I'm experiencing problem in binding a loading status.

I think this happens because when I use $('.ui.dropdown').dropdown(); on the following block

<select class="ui dropdown">
    <option value="">Gender</option>
    <option value="1">Male</option>
    <option value="0">Female</option>
</select>

it becomes this:

<div class="ui dropdown selection" tabindex="0">
    <select class="noselection">
        <option value="">Gender</option>
        <option value="1">Male</option>
        <option value="0">Female</option>
    </select>
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu" tabindex="-1">
        <div class="item" data-value="1" data-text="Male">Male</div>
        <div class="item" data-value="0" data-text="Female">Female</div>
    </div>
</div>

So using [class.loading]="loading" on select doesn't work. Do you know a workaround I can apply to have it working?

(Sorry, I can't provide you a jsfiddle or stackblitz code because of this).

[lubber-de]

Can't you just add the loading class to the .ui.dropdown selector after thr dropdown has been transformed into a div? It does not matter if its a select or div.
Yes, angular still refers to the hidden select tag, but just doing $('.ui.dropdown').addClass('loading') may probably work for you?
See https://jsfiddle.net/spthmegf/ (not angular, though)

[smartm0use]

Thank you for your hint, but it doesn't work because it should be quite the same of using bind variables on template.
I think the problem is that Angular can't bind because Fomantic is wrapping my template... :(

[lubber-de]

Then I am afraid you might have to use the div version of dropdown as an angular template

[smartm0use]

Can't you just add the loading class to the .ui.dropdown selector after thr dropdown has been transformed into a div? It does not matter if its a select or div.
Yes, angular still refers to the hidden select tag, but just doing $('.ui.dropdown').addClass('loading') may probably work for you?
See https://jsfiddle.net/spthmegf/ (not angular, though)

I have found a solution using your hints. Now it works with select. Thank you so much.