How to use Angular 4 variable inside Jquery Function

Question

This question has already got some response here. But this doesn't seem to be working for me.

I am trying to create a tree structure using jQuery. The problem is I can not use a declared angular 4 variable inside a jQuery function. Here's the code.

employees = ["Mr. John", "Mr. Steve"];

ngOnInit() {
   (function($) => {
      function OrgChart($container, opts){
          console.log(this.employees);
      }
   });
}

I see an error in console stating, "Function declarations are not allowed inside blocks in strict mode when targeting ES3 or ES5"

It might be helpful if you can describe step-by-step, what you think this code is supposed to do. Here's what it does now: 1) On initialization of the Angular component, 2) Declare an anonymous function that takes a single argument, $, 3) Within this anonymous function, a named function OrgChart is declared, which takes two arguments, $container and opts. 4) Within the OrgChart function, the console method log is called with a single argument, which is the component's property employees. At no point is either the anonymous function or the named function OrgChart called. — user6080677
– user6080677, Commented Apr 13, 2018 at 0:30

Pac0 · Accepted Answer · 2018-04-13 00:09:32Z

3

1st (the `employees of undefined` problem)

To bind the "this" of the component, use the arrow notation for functions :

($) => { console.log(this.employees)}

instead of function($) { ... }

2nd (the "function declarations are not allowed inside blocks")

You could declare your other inner function in another place in your Angular component, and then refer to it :

ngOnInit() {
    // this declaration is nonsense to me, this will declare a function that is never called and exists only here, but anyway... 
    ($) => {
        // you can call OrgChart here : 
        this.OrgChart()
    } 
}

OrgChart($container, opts) { 
    console.log(this.employees); 
}

edited Apr 13, 2018 at 0:09

answered Apr 12, 2018 at 23:25

Pac0

23.3k9 gold badges76 silver badges85 bronze badges

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

6 Comments

Ronak Gupta Over a year ago

Thanks for your effort but this doesn't seem to solve the purpose. I have modified the question as I am still getting an error even when I follow this.

Pac0 Over a year ago

I just saw your edit, so it becomes another question now. I still don't really understand what you are trying to do, but as a remark : With the arrow notation, you mustn't write the keyword "function". Also, what are you trying to achieve exactly ?

Pac0 Over a year ago

I must be rusty with jQuery, but the more I look at this code, the more I'm thinking that it is doing litteraly nothing.

Ronak Gupta Over a year ago

This is a modified part of the code where the problem exists. There is a bunch of other jQuery stuff which exists inside the OrgChart function which builds a hierarchical tree structure for me using jQuery. Just that I need to use an employees array declared outside this function to build the tree rather than using some dummy data declared inside the function.

Pac0 Over a year ago

Ok, not sure how to answer since I can't really test this myself, but I tried to show some additional clue for this second problem.

|

Diogo Rodrigues · Accepted Answer · 2019-02-11 09:07:16Z

0

You need store angular component reference in another variable before start jquery block.

export class PlanGruposComponent implements OnInit {
   group = 'Meu grupo';

   OnInit() {

       //reference of currect component object
       let temporaryThis = this; 

       $(document).ready(function () {
          console.log("Print : " + temporaryThis.group);
       });

   }
}

answered Feb 11, 2019 at 9:07

Diogo Rodrigues

1,34215 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use Angular 4 variable inside Jquery Function

2 Answers 2

1st (the `employees of undefined` problem)

2nd (the "function declarations are not allowed inside blocks")

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1st (the employees of undefined problem)

2nd (the "function declarations are not allowed inside blocks")

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1st (the `employees of undefined` problem)