Angular 2 bootstrap-selectpicker dynamic data and ngFor

Question

I use bootstrap-selectpicker in my project, when I try to put the data dynamically the dropdown doesn't work. I think selectpicker() gets called too soon. I want it to be called after I fetch the data.

export class MyComponent implements AfterViewInit {
   accounts = Observer<Account[]>;

   // Account service is just a http service returning Observer with accounts.
   constructor(private accountService : AccountService) {
       this.accounts = this.accountService.getAccounts();
   }

   ngAfterViewInit() {
       $('.selectpicker').selectpicker();
   }
}

Template:

<select class="selectpicker" multiple>
    <option *ngFor="let account of accounts | async" >{{account.username}}</option>             
</select>

It only works When I use predefined list like this:

<select class="selectpicker" multiple>
    <option>One</option>             
    <option>two</option>
    <option>three</option>     
</select>

This is my AccountService:

@Injectable()
export class AccountService {
    constructor(private http: Http) { }

    // TODO: Error handling
    getAccounts() : Observable<Account[]> {
        return this.http.get("/api/accounts").map(response => response.json());
    }
}

@KD I have just tried it. It works when I switch between routes, but it doesn't after first page load. — Konrad
– Konrad, Commented Apr 22, 2017 at 22:41
@KD I define it in my main module (AppModule) like this: providers: [AccountService] — Konrad
– Konrad, Commented Apr 22, 2017 at 22:48

snorkpete · Accepted Answer · 2017-04-25 23:26:25Z

3

Although your technique will work fine, since ngAfterViewChecked, as the name suggests, is called during every change detection run, there is a risk that this technique is a potential performance issue. This is because your selectpicker('refresh') function will be called regardless of if your list has actually been changed or not.

One way around this is to adjust your observable slightly so that it triggers the selectpicker('refresh') function only when your service returns a new list of Accounts.

constructor(private accountService : AccountService) { }

ngOnInit() {

   $('.selectpicker').selectpicker(); // <-- i don't know if this first call is necessary before the version with 'refresh' parameter will work - try removing it
   this.accounts = this.accountService.getAccounts().do(() => {
     setTimeout(() => {
       $('.selectpicker').selectpicker('refresh');
   }, 150);
   });
}

Explanation

Basically, the key is the do operator that allows you to run some side effect code whenever a new value is emitted from your observable, without changing the value coming out of the observable. So, use this to run your refresh function with each new list of accounts. I also moved your logic into ngOnInit - you should limit your constructor logic to just be simple initialization of properties through dependency injection. Finally, you need to wrap your selectpicker('refresh') call in a setTimeout to allow change detection to run (and the DOM to update) before trying to find the new elements on the DOM for the select picker. The exact timeout delay isn't as important as ensuring that you use setTimeout so the selectpicker('refresh') call runs in a separate tick of the event loop, after change detection has updated the DOM.

To be clear, I honestly doubt the performance penalty of your existing technique is anything to be concerned about, but the technique above can be added to your toolbox for situations when performance might actually be affected.

edited Apr 25, 2017 at 23:26

answered Apr 23, 2017 at 0:52

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Konrad Over a year ago

That's a good point and looks cleaner. I also need to import 'rxjs/add/operator/do'.

Konrad Over a year ago

Just tested it and it didn't work. Probably the view hasn't been initialized at the time of sending request.

snorkpete Over a year ago

@midnightStar, your theory might be right - the view might not be initialized yet. try moving that logic from ngOnInit to ngAfterViewInit

Konrad Over a year ago

didn't work. I've checked this logic with every lifecycle hook. That's really weird, my solution works though might cause performance issues. Right now it doesn't.

snorkpete Over a year ago

actually, i think i understand what's happening. Your selectpicker() function works directly with the DOM and requires that the DOM be updated with the new list before it can work. At the point where we execute it in the do handler, we just got the new Account list, and change detection hasn't run yet to update the DOM with the new list. Try wrapping the selectPicker() in a setTimeout of 100ms, which will move the call to another tick of the event loop and hence give change detection time to run. if it works, i'll update the answer

|

B--rian · Accepted Answer · 2019-08-22 09:31:24Z

2

Just simply add ngIf="accounts" in the upper <div> of the <select> tag like :

<div *ngIf="accounts">
   <select class="selectpicker" multiple>
      <option *ngFor="let account of accounts" >{{account.username}}</option>             
   </select>
</div>

edited Aug 22, 2019 at 9:31

B--rian

5,97611 gold badges50 silver badges101 bronze badges

answered Aug 22, 2019 at 7:27

suresh kumar

212 bronze badges

Comments

Julia Passynkova · Accepted Answer · 2017-04-23 00:08:10Z

1

You might use Subject.

let subject = new Rx.Subject();

constructor(private accountService : AccountService) {
  this.accountService.getAccounts().subscribe(subject);
  this.accounts = subject.asObservable();
}

 ngAfterViewInit() {
    subject.asObservable()
     .subscribe(x=> {
        $('.selectpicker').selectpicker();
    });
 }

<select class="selectpicker" multiple>
    <option *ngFor="let account of accounts | async" >
   {{account.username}}</option>             
 </select>

answered Apr 23, 2017 at 0:08

Julia Passynkova

18k6 gold badges36 silver badges32 bronze badges

Comments

Konrad · Accepted Answer · 2017-04-25 23:13:36Z

0

I figured I can call selectpicker('refresh') after I dynamically update the selectpicker. This is so far the easiest way to solve this problem.

ngAfterViewInit() {
    $('.selectpicker').selectpicker();
}

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

I have found it by looking at the wrapper library for React here.

Edit: This method will seem to work at first sight but it doesn't and it will refresh at the time you try to check some item in the select box and won't allow selecting more items. For working solution see snorkpete's anwser.

edited Apr 25, 2017 at 23:13

answered Apr 23, 2017 at 0:27

Konrad

7,36712 gold badges66 silver badges103 bronze badges

Collectives™ on Stack Overflow

Angular 2 bootstrap-selectpicker dynamic data and ngFor

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related