bootstrap-select dropdown options not getting loaded sometime

Question

I'm using bootstrap-select 1.12.4 version with Angular 4.3.5.

I'm trying to load the dropdown options using http call and async pipe.

The issue I'm facing is, The select dropdown options are not getting loaded most of the time with I refresh the page. But sometimes the options load. I'm not sure what mistake I'm doing here. Can anyone help me here? Thanks in advance.

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';    
import { Observable } from 'rxjs';

@Component({
  selector: 'app-bob-report',
  templateUrl: './bob-report.component.html',
  styleUrls: ['./bob-report.component.css']
})
export class BobReportComponent implements OnInit {

  observableOptions: Observable<any>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.observableOptions = this.http.get('assets/data/users.json');
  }

}

component.html

<form>
  <div class="form-group">
    <label for="sel1">Select list (select one):</label>
    <select class="selectpicker" data-live-search="true">
      <option *ngFor="let option of observableOptions | async" value={{option.id}}> {{option.value}} </option>
    </select>
  </div>
</form>

Attached two images, one with the issue and the other one without issue.

Answer 1

Hello samy i know this is too late to answer as your answer is bit correct with {{ refreshSelect() }} calling in view but it goes in infinite loop which breaks the bootstrap-select however i found the proper solution for it may be this can save someones day.

  this.http.get('http://google.com').subscribe(data => {
    console.log(data);
  }, error => {
    console.log(error);
  }, () => {
    setTimeout(() => {
      $('.selectpicker').selectpicker('refresh');
    });
  });

have a look at the third parameter it's the callback in subscribe method which can be used to refresh the selectpicker after the content has been loaded.

Answer 2

I made the bootstrap-select work by below solution, I'm sure there can be a better solution. Just sharing my solution.

1.Added below code to typings.d.ts

interface JQuery {
  addClass(className: string): JQuery;
  attr(attributeName: string, value: string|number): JQuery;
}
interface JQuery {
    selectpicker(options?: any, callback?: Function):any;
}

2.Added below line in my component.ts after all the import statements.

declare var $:any;

3.Added below function in my component.ts

refreshSelect() {
   $('.selectpicker').selectpicker('refresh');
}

4.Finally calling the refreshSelect() method in my template after iterating the select options.

<div *ngIf="observableOptions | async; let loadedOpts; else loadingSelect;">
  <select class="selectpicker" data-live-search="true">
    <option *ngFor="let opt of loadedOpts" value={{opt.id}}> {{opt.value}} </option>
  </select>
  {{refreshSelect()}}
</div>
<ng-template #loadingSelect>Loading User Data dropdown...</ng-template>

I'm sure this 4th step can be done in a better way. The key is to call the $('.selectpicker').selectpicker('refresh'); method after the ngFor iteration to make the bootstrap-select work. Please share if you have a better solution.

Thanks.

Answer 3

Add a delay.

   setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);

Answer 4

From what I see you're probably need to put an ngIf statement to wait until the options are loaded before you show the drop-down.

It may be populating before you actually have data

You would also benefit from making the get request a promise. That way you can always ensure that it will resolve and give you the response you are looking for i.e. .subscribe()

And On further look you should probably .map and return the result to the subscription of the observable via next() or subscribing to the observable http call

Answer 5

Looks like the issue is with class="selectpicker". When I remove that class, the dropdown works fine, I don't get the bootstrap-select style though.

<div *ngIf="observableOptions | async; let loadedOpts; else loadingSelect;">
  <select class="selectpicker" data-live-search="true">
    <option *ngFor="let opt of loadedOpts" value={{opt.id}}> {{opt.value}} </option>
  </select>
</div>
<ng-template #loadingSelect>Loading User Data dropdown...</ng-template>

Answer 6

You can call:

$('.selectpicker').selectpicker('refresh');

In component.ts by adding the function:

ngAfterViewInit() {

    $('.selectpicker').selectpicker('refresh');
}

that will called after the view got rendered.

Answer 7

If you installed bootstrap-select from nmp, you must place the path of the files in the configuration file angular.json, if the files folder of the bootstrap-select package was not installed with npm, it is enough to place the folder somewhere in the Angular project and specify the path in angular.json file

<div>
    "styles":[<br>`
`
         //the css path of the bootstrap-select package<br>
         "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css"<br>    
      ],<br>
     <br>
    "scripts":[<br>
        //the js path of the bootstrap-select package<br>
         "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css"<br>    
      ]
</div>