title: Accessing component properties from jQuery or other events
body: <p>I'm trying to use <code>vis.js</code> (or jQuery) click events in an Angular2 component. I have my graph displaying just fine, and I can successfully catch click events.</p>
  
  <p>However, within the context of click events, I loose my references to my component's properties. For example, <code>this.visData</code> is <code>undefined</code> from within the event:</p>
  
  <pre><code>export class GraphContainerComponent implements OnInit {
      private visData: {};
      private options: {} = {};
      private network: any;
      @ViewChild('graphContainer') graphContainer;
  
      ngOnInit() {
          // populates this.visData
          // this.visData = { nodes, edges }
          this.makeGraph();
      }
  
      makeGraph() {
          // no problem creating and displaying my graph, everything works
          this.network = new vis.Network(this.graphContainer.nativeElement, this.visData, this.options);
  
          // click event
          this.network.on("selectNode", function (params) {
              console.log(this.visData); // logs "undefined"
          }
  
          $('a').on('click', function() {
              console.log(this.visData); // "undefined" as well
          });
      }
  }
  </code></pre>
  
  <p>I understand why this is normal behavior, and <em>I know mixing Angular2 and jQuery or some other DOM-manipulating library is not recommended practice</em>, but sometimes it's all you got.</p>
  
  <p><strong>What's the best way to maintain a reference to my component's properties from within these events?</strong></p>
  
  <p>Crucially, there are dozens of these components on my page, so I don't think some kind of global storage is the way to go.</p>