CODEWITHSUNDEEP
angularjstwitter-bootstrap-3bootstrap-select
user1438038
user1438038

Reputation: 6077

Options of bootstrap-select not displayed in Angular application

I added a language selector to my Angular app using bootstrap-select. It used to work in the past, but after a browser update the select element is no longer visible. I only see the label with no options.

<div class="row">
  <div class="col-md-12">
    <label for="language_select">Language:</label>
    <select id="language_select" class="selectpicker" data-width="fit">
      <option value="en" data-content="<span class='flag-icon flag-icon-gb'></span> English"></option>
      <option value="de" data-content="<span class='flag-icon flag-icon-de'></span> Deutsch"></option>
    </select>
  </div>
</div>

Is there any known issue when using bootstrap-select with Angular? Even without any data binding, the select box is not displayed.

I'm using:

Upvotes: 1

Views: 2985

Answers (1)

user1438038
user1438038

Reputation: 6077

tl;dr

The Angular extension nya-bootstrap-select solved the problem for me. The module has no dependencies to external JavaScript files and overcomes the issue of different concepts within Angular and jQuery (data binding vs. event-driven).

Detailed answer

It turned out that using Angular and jQuery (which is required by Bootstrap) is widely discouraged, due to the different concepts of both libraries (data binding vs. event-driven). So eventually, directly using bootstrap-select within my Angular application is not an option.

There is an Angular extension called angular-bootstrap-select that tries to overcome this technical issue. However, the GitHub project is marked as DEPRECATED.

I found a fork called ng-bootstrap-select, which is still being maintained. Though, I did not have a closer look at that project.

Instead I am using nya-bootstrap-select now, which is another Angular extension. It is loosely based on the initial bootstrap-select implementation, but has no dependencies to neither jQuery nor Bootstrap's JavaScript code. You only need to include the Bootstrap CSS file.

My code looks somewhat like this now:

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4">
    <label for="language_select">Language:</label>
    <ol id="language_select" class="nya-bs-select">
      <li class="nya-bs-option" value="en">
        <a><span class="dummy-wrapper"><span class="flag-icon flag-icon-gb"></span> English</span></a>
      </li>
      <li class="nya-bs-option" value="de">
        <a><span class="dummy-wrapper"><span class="flag-icon flag-icon-de"></span> Deutsch</span></a>
      </li>
    </ol>
  </div>
</div>

The combobox is initialized right from the start, picking a different item immediately toggles the language and the current user language is pre-selected automatically, when loading the page for the very first time.

Upvotes: 1

Related Questions