2

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"

Ronak Gupta
  • 71
  • 2
  • 8
  • 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. – Jim Perris Apr 13 '18 at 00:30

2 Answers2

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); 
}
Pac0
  • 21,465
  • 8
  • 65
  • 74
  • 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. – Ronak Gupta Apr 12 '18 at 23:34
  • 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 Apr 12 '18 at 23:41
  • 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. – Pac0 Apr 12 '18 at 23:44
  • 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. – Ronak Gupta Apr 12 '18 at 23:49
  • 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. – Pac0 Apr 13 '18 at 00:00
  • Thanks for your effort. Will try to implement and get back :) – Ronak Gupta Apr 13 '18 at 00:21
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);
       });

   }
}
Diogo Rodrigues
  • 1,312
  • 15
  • 15