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
– manuerumx, Commented Sep 28, 2016 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
– user2529173, Commented Sep 28, 2016 at 17:00
Possible duplicate of Javascript: how to set "this" variable easily? — Heretic Monkey
– Heretic Monkey, Commented Sep 28, 2016 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
– Heretic Monkey, Commented Sep 28, 2016 at 17:01

gelliott181 · Accepted Answer · 2016-09-28 17:10:03Z

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, 2016 at 17:10

answered Sep 28, 2016 at 17:01

gelliott181

1,01811 silver badges20 bronze badges

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

4 Comments

user2529173 Over a year ago

Yay, that did it! Thanks!

Dila Gurung Over a year ago

perfect, adding "()=>{ }" is conceptual and it works perfectly in my case too.

Pravinraj Venkatachalam Over a year ago

When I add this I am unable to use Javascript "this" and its properties. Any solution to access those values

gelliott181 Over a year ago

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 (github.com/getify/You-Dont-Know-JS/blob/master/…) 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.

Asad · Accepted Answer · 2017-04-21 15:49:21Z

1

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");
  }
});

edited Apr 21, 2017 at 15:49

answered Jan 31, 2017 at 22:09

Asad

115 bronze badges

Comments

Pravinraj Venkatachalam · Accepted Answer · 2018-10-24 11:50:02Z

1

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);
  });

answered Oct 24, 2018 at 11:50

Pravinraj Venkatachalam

2945 silver badges14 bronze badges

Collectives™ on Stack Overflow

Access angular2 variables in jquery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related