Access angular2 variables in jquery

Question

I'm using jQuery for some things in my angular2 projects. But I can't manage to use variables I've declared in angular2 to use in jQuery. I have something like this:

export class AddExerciseComponent implements OnInit {

  parameters:Array<string> = ["FU"];

  constructor() { }

  ngOnInit() {


    $('.chips').on('chip.add', function(e, chip){
      this.parameters.push(chip.data);
      console.log(this.selectedValue);
    });
}

This would get me an error that parameters is not defined. I guess it's because I use this. What else can I do?

I never use Angular2, but is possible to add the variable to the scope like in angular 1? — manuerumx, Sep 28 '16 at 16:58
I'm using Angular2 for a week now, so I'm not sure, but I don't think there is something like a scope in v2 — user2529173, Sep 28 '16 at 17:00
Possible duplicate of [Javascript: how to set "this" variable easily?](http://stackoverflow.com/questions/456967/javascript-how-to-set-this-variable-easily) — Heretic Monkey, Sep 28 '16 at 17:01
What can you do? Read up on scope and `this` :). See the dupe, but basically, capture `this` in a variable, then use that variable in your event handler. — Heretic Monkey, Sep 28 '16 at 17:01

gelliott181 · Accepted Answer · 2016-09-28T17:10:03.380

25

You need to use an arrow function expression (() => {}) to keep this in scope. Try:

export class AddExerciseComponent implements OnInit {

parameters:Array<string> = ["FU"];

constructor() { }

ngOnInit() {
// removed function keyword and added () => {} syntax
  $('.chips').on('chip.add', (e, chip) => {  
    this.parameters.push(chip.data);
    console.log(this.selectedValue);
  });
}

When you passed your callback as a regular old function, JavaScript doesn't consider your callback to be within the scope of the calling function, leaving this unusable for calling data from the scope you thought you were in. By using an Arrow function, the scope is saved and this is usable for accessing data as expected.

edited Sep 28 '16 at 17:10

answered Sep 28 '16 at 17:01

gelliott181

1,008
11
19

1

Yay, that did it! Thanks! – user2529173 Sep 28 '16 at 17:07
perfect, adding "()=>{ }" is conceptual and it works perfectly in my case too. – Dila Gurung Apr 11 '18 at 06:05
When I add this I am unable to use Javascript "this" and its properties. Any solution to access those values – Pravinraj Venkatachalam Oct 11 '18 at 11:00
Arrow functions are an ES6 feature that skips giving the function its own `this`, instead referencing the lexical context it's contained in. If you're not familiar with how `this` works in JS (It's not actually referencing the class scope like in most OOP languages), then you should read the amazing "You Don't Know JS" chapter (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md) on the topic to get a better handle on what's going on. After that, you'll need to avoid using arrows if you need to use `call(thisArg, args)` or similar binding methods. – gelliott181 Oct 11 '18 at 15:38

Asad · Answer 2 · 2017-04-21T15:49:21.940

If you are looking to use angular variables in jquery animate ON-Complete function call back,that's how you do it:

$('#myDiv').animate({top: 70+"%"},{

  queue: false,
  duration: 1000,
  complete: () => {  

  //this is you angular variable of the class
      this.angularVar = 0;
      $("#myDiv").hide();

  //this is you angular variable of the class    
      this.showAnimation = false;

  //this is you angular class function
      this.angularFunction();

      console.log("animation complete");
  }
});

score 1 · Answer 3 · answered Oct 24 '18 at 11:50

Assign angular's this(instance) to Jquery's this(instance) to use the angular variable inside JQuery

let jQueryInstance = this; // This line will assign all the angular instances to jQueryInstance variable.
$('.chips').on('chip.add', (e, chip) => { 

    /* this.parameters.push(chip.data); */

    // Instead of the above line we have to use like below
    jQueryInstance.parameters.push(chip.data); // instead of "this", "jQueryInstance" is used

    // console.log(this.selectedValue);
    console.log(jQueryInstance.selectedValue);
  });

Access angular2 variables in jquery

3 Answers3

Linked