Access variable set in jQuery function from Angular 2

Question

I have to do a workaround and initialize jQuery datetimepicker inside Angular 2 app (and it should be reworked later).

When I assign datetime value to a variable, it is not visible anywhere else in Angular app. Here is what I do:

datetime: string;

setDT() {
  jQuery(this.elementRef.nativeElement).find("#datetimepicker").datetimepicker({
    onChangeDateTime: function(currentDateTime) {
      this.datetime = currentDateTime;
      console.log(this.datetime); // -> logs correct selected datetime, i.e. Fri Mar 11 2016 10:00:00 GMT+0200 (EET)
    }
  });
}

but if I try to reach out this.datetime somewhere else it is undefined:

save() {
  console.log(this.datetime); // -> 'undefined'
}

How should be variables passed between jQuery and Angular 2?

Roman

Somewhere else means what? in same component or in some other component? — micronyks
– micronyks, Commented Mar 9, 2016 at 6:59

Mohy Eldeen · Accepted Answer · 2016-03-09 20:59:46Z

3

You will need to use jquery proxy to do that:

setDT() {
  jQuery(this.elementRef.nativeElement).find("#datetimepicker").datetimepicker({
    onChangeDateTime: jQuery.proxy(function(currentDateTime) {
      this.datetime = currentDateTime;
      console.log(this.datetime); // -> logs correct selected datetime, i.e. Fri Mar 11 2016 10:00:00 GMT+0200 (EET)
    }, this)
  });
}

answered Mar 9, 2016 at 20:59

Mohy Eldeen

1,3402 gold badges13 silver badges24 bronze badges

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

Comments

Roman Krayovskyy · Accepted Answer · 2016-03-09 07:11:36Z

0

Apparently, I was able to get needed value through

this.datetime = jQuery(this.elementRef.nativeElement).find("#datetimepicker").val();

but still would be great to receive an answer for educational reasons.

thanks again!

answered Mar 9, 2016 at 7:11

Roman Krayovskyy

11112 bronze badges

Collectives™ on Stack Overflow

Access variable set in jQuery function from Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related