jQuery in Angular2 not working

Question

I am trying to get jQuery to work in my angular2 application. I am unable to post all of my code here but I will try to elaborate as much as I can. Any pointers would be appreciated.

my root app.ts file looks something similar to this

/// <reference path="../../typings/jquery/jquery.d.ts" />
import {Component,provide,DynamicComponentLoader,Injector,OnInit,AfterViewInit,ViewEncapsulation} from 'angular2/core';

declare var jQuery:JQueryStatic;

@Component({
    selector: 'app',
    templateUrl: './app/app.html',
    encapsulation: ViewEncapsulation.None
})

export class app implements OnInit,AfterViewInit{
 constructor(private elementRef: ElementRef)
ngOnInit() {
        this.dcl.loadIntoLocation(HeaderComponent, this.elementRef, 'header');
        this.dcl.loadIntoLocation(FooterComponent, this.elementRef, 'footer');
    }
    ngAfterViewInit() {
           (<any>jQuery(this.elementRef.nativeElement).find('.datepicker').datepicker());
    }
}

I am using bootstrap datepicker and am expecting the widget to fire when I click on an input with the datepicker class. But I can't get this to work.

I can get (<any>jQuery(this.elementRef.nativeElement).hide()); to work but not datepicker event.

I think you must be getting some errors in console. do you? if so what is that? — micronyks
– micronyks, Commented Apr 26, 2016 at 15:42
isn't there any additional datepicker.js or something needed? I guess so. — micronyks
– micronyks, Commented Apr 26, 2016 at 15:48
There is. It is in included in the index.html as a script tag. — zer0
– zer0, Commented Apr 26, 2016 at 15:49
cdnjs.com/libraries/bootstrap-datepicker look at here. have you added it? I guess after adding appropriate compatible version, it will start working. — micronyks
– micronyks, Commented Apr 26, 2016 at 15:49

Community · Accepted Answer · 2017-05-23 10:30:52Z

3

It's difficult to help you like this without the content of the app.html file ;-)

I implemented a directive to wrap jquery datepicker:

@Directive({
  selector: '[datepicker]'
})
export class DatepickerDirective {
  @Output()
  change:EventEmitter<string> = new EventEmitter();

  constructor(private elementRef:ElementRef) {
  }

  ngOnInit() {
    $(this.elementRef.nativeElement).datepicker({
      onSelect: (dateText) => {
        this.change.emit(dateText);
      }
    });
  }
}

I apply it this way:

<input type="date" datepicker/>

See this question for more details:

Change event with jQuery datepicker and Angular 2

and this plunkr: https://plnkr.co/edit/TVk11FsItoTuNDZLJx5X?p=preview.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 26, 2016 at 15:51

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

1 Comment

zer0 Over a year ago

Thank you! This worked. But I wish there was a way to just assign an event to every datepicker selector as such $('.datepicker').datepicker(); at one place and be done with it rather than assigning an attribute for every occurence and defining the directive. Maybe, I'm not thinking Angular?

Collectives™ on Stack Overflow

jQuery in Angular2 not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related