Angular 2 calling jQuery after rendering elements - after consuming API

Question

My Angular2 app consumes a RESTful API and then creates a bunch of <select> elements based on the result. I'm trying to call a jQuery function on these <select> elements, but it looks like the jQuery function executes too late. I tried putting the function in ngAfterContentInit but that didn't work. Putting it in ngAfterViewChecked froze my browser.

After the page has rendered, if I paste the jQuery function into the console, everything works, so I know that my function and everything are functional. Their order is just probably messed up or something.

In my component:

ngOnInit() {
  this.myService.getAll().subscribe(
           data => this._data = data,
           error => this._error = "invalid.");
}

ngAfterViewInit() {
  $("select").select2(); // <--- jQuery function I need to execute after rendering
}

In my template:

<select *ngFor="let d of _data">...blah blah</select>

How about calling ` $("select").select2();` in the subscribe? — Anthony C
– Anthony C, Commented Dec 2, 2016 at 19:00

yurzui · Accepted Answer · 2016-12-02 19:48:49Z

7

This should work for you:

@ViewChild('select') selectRef: ElementRef;
constructor(private myService: MyService, private ngZone: NgZone) {}

ngOnInit() {
  this.myService.getAll().subscribe(data => {
    this.options = data;
    // waiting until select options are rendered
    this.ngZone.onMicrotaskEmpty.first().subscribe(() => {
      $(this.selectRef.nativeElement).select2(); 
    });
  });
}

Plunker Example

answered Dec 2, 2016 at 19:48

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

2 Comments

7ball Over a year ago

But wouldn't this only affect 1 <select> element? What if I had multiple?

yurzui Over a year ago

Yeah it is only for select that is populated from service. If you want to apply it to all select then use your jquery selector

Collectives™ on Stack Overflow

Angular 2 calling jQuery after rendering elements - after consuming API

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related