jQuery function not called at page load in Angular 2

Question

I am trying to call jQuery function (i.e. initialize bootstrap selectpicker) at page load in ng2 app:

jQuery(this.elementRef.nativeElement).find("select").selectpicker({
  iconBase: 'fa',
  tickIcon: 'fa-check',
  title: '...'
});

(assume that jQuery and elementRef are defined and it works well in other cases)

I try to call this function in ngOnInit, ngAfterContentInit, ngAfterViewInit but with no luck.

I suspect it calls before element is rendered or so.

Here is my template of select which I try to convert into bootstrap selectpicker:

<select ngControl="hashtags" [(ngModel)]="hashtags" multiple>
  <option *ngFor="#hashtag of card.hashtags" [value]="hashtag.id" (click)="selectHashtag(hashtag.id)">{{hashtag.name}}</option>
</select>

Any ideas how to call it right?

UPD: seems like the issue comes from a fact that a form (and my select element) is rendered inside ngIf:

<div *ngIf="card">
...
</div>

so, at the moment of rendering page and calling ngOnInit() form is not rendered yet. I will try to work it around by applying different approach, but how would you call function AFTER http request and form render are complete?

If you put this in ngOnInit and put a breakpoint on the line, does jQuery(this.elementRef.nativeElement).find("select") return anything? — Michael Liu
– Michael Liu, Commented Mar 13, 2016 at 19:11
no, it doesn't: jQuery [] however, if I call $("select") after page load it returns jQuery [<select class="ng-untouched ng-pristine ng-invalid">] — Roman Krayovskyy
– Roman Krayovskyy, Commented Mar 13, 2016 at 19:52
Ok. What does jQuery(this.elementRef.nativeElement).find("select") return if you run it later? — TGH
– TGH, Commented Mar 13, 2016 at 20:00
it returns jQuery [<select class="ng-untouched ng-pristine ng-invalid">] if I bind console.log(jQuery(this.elementRef.nativeElement).find("select")); to a button and call it later. Is it what you asked for? — Roman Krayovskyy
– Roman Krayovskyy, Commented Mar 13, 2016 at 20:04

TGH · Accepted Answer · 2016-03-13 19:17:09Z

2

Wouldn't it be similar to this:

import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;

@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});
    }
}

More info here: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

answered Mar 13, 2016 at 19:17

TGH

39.4k13 gold badges106 silver badges140 bronze badges

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

4 Comments

Roman Krayovskyy Over a year ago

correct, that's exactly how I do it, using sample from Torgeir Helgevold, and it does not work for me.

TGH Over a year ago

How is the select tag included in the template?

Roman Krayovskyy Over a year ago

<select ngControl="hashtags" [(ngModel)]="hashtags" multiple>         <option *ngFor="#hashtag of card.hashtags" [value]="hashtag.id" (click)="selectHashtag(hashtag.id)">{{hashtag.name}}</option>       </select>

TGH Over a year ago

I have not used selectPicker, but here is a plunker with a bootstrap dropdown. Maybe you can use that as a baseline: plnkr.co/edit/up5UdH?p=preview

Roman Krayovskyy · Accepted Answer · 2016-03-15 21:29:15Z

2

and the right answer is to call it inside ngAfterViewChecked() {}

AfterViewChecked callback triggers everytime page is changed, thus to make sure my functions are called only once I set flags i.e. selectpickerEnabled = true and check them before calling function again.

I believe there must be the right way to do it, but that's how I am going to solve it for now...

edited Mar 15, 2016 at 21:29

answered Mar 15, 2016 at 21:14

Roman Krayovskyy

11112 bronze badges

Collectives™ on Stack Overflow

jQuery function not called at page load in Angular 2

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related