How to pass Angular variable into jQuery function

Question

I think this should be fairly simple, but for the life of me I can't get it working.

I have an angular string (placeholder) that I would like to reference from a jQuery function that's fired on $document.ready(). Basically this is what I have:

placeholder: string;

ngOnInit() {
    this.translateService.get(['']).subscribe(translations => {
      this.placeholder = this.translateService.instant('placeholder');
      console.log('PLACEHOLDER', this.placeholder);  <<<<<<<<< has expected value
    });

    $(document).ready(function () {
      console.log('READY', this.placeholder);   <<<<<<<<< undefined
      $('#dropDown').select2({
        placeholder: this.placeholder,
        data: [
            ...
        ]
      });
    });        
}

How do I reference this.placeholder from within the jQuery function?

in document.ready this is refering to window object not to angular obj — Negi Rox
– Negi Rox, Commented Sep 30, 2019 at 6:49

hoeni · Accepted Answer · 2021-10-11 11:17:46Z

4

When you use the function keyword, it defines its own this, which overrides the outer this you believed to use:

this.placeholder = 'Foo';
$(document).ready(function () {
  console.log('READY', this.placeholder); // this is another this, local to the function
}

There are two solutions:

With old JS

In pure JS you could just move away your outer this to use it inside:

this.placeholder = 'Foo';
var that = this;
$(document).ready(function () {
  console.log('READY', that.placeholder); // that refers to the outer this
}

With modern JS (ECMA script >5)

If you can use a modern browser with ECMA script >5, you can use the arrow function () => {} instead of function() {}, which automatically preserves the outer this:

this.placeholder = 'Foo';
$(document).ready(() => {
  console.log('READY', this.placeholder); // () => {} does not override this
}

edited Oct 11, 2021 at 11:17

answered Sep 30, 2019 at 7:01

hoeni

3,34035 silver badges49 bronze badges

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

Comments

Negi Rox · Accepted Answer · 2019-09-30 07:08:35Z

2

you can use something like below code. remove document.ready and function keyword

use arrow function to keep this in scope.

export class TestComponent implements OnInit {

placeholders:Array<string> = [];

constructor() { }

ngOnInit() {
  // removed function keyword and added () => {} syntax
  $('#btn').on('click', (e, arr) => {  
    console.log(this.placeholders);
  });
}

answered Sep 30, 2019 at 7:08

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

1 Comment

CMLee Over a year ago

This solved the issue where I could not reach an angular service that had been passed in through the constructor from the jquery function. Simply removing the function keyword gave me access. Thank you!

Collectives™ on Stack Overflow

How to pass Angular variable into jQuery function

2 Answers 2

With old JS

With modern JS (ECMA script >5)

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

With old JS

With modern JS (ECMA script >5)

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related