this.someFunction(params) is not a function in Angular 4

Question

I am working with d3.js in an Angular 4 app. I am trying to call a function, but it throws me an error as ERROR TypeError: this.highlightNodes is not a function.

Here's the code, I was working on:

import {Component, OnInit} from '@angular/core';

declare let d3:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    this.networkGraph();
  }

  networkGraph() {
    d3.netJsonGraph("../assets/json/network.json",
      {
        el: "#randomDiv",
        onClickNode: function (url, opts) {
          //Here's the error being thrown
          this.highlightNodes(url, "nodes", true);
        }
      }
    );
  }

  highlightNodes(url, type, initial) {
    console.log("Its working");
  }
}

Using bind(this) is not helping because it is binding locally. Please help me resolve this as how to call the function the proper way.

You are calling a method inside a click handler which is not an arrow function. This will change the context. Try `nClickNode: (url, opts) => {}` — Rajesh, Oct 06 '17 at 10:34

score 2 · Answer 1 · edited Oct 06 '17 at 10:44

2

This refers to the onClickNode in this case, use arrow function:

onClickNode: (url, opts) => {
   //Here's the error being thrown
   this.highlightNodes(url, "nodes", true);
}

edited Oct 06 '17 at 10:44

yurzui

205,937
32
433
399

answered Oct 06 '17 at 10:35

Sajeetharan

216,225
63
350
396

2

Have you posted answer from phone? – Rajesh Oct 06 '17 at 10:36
@Rajesh haha ! how do you know? anyway updated it – Sajeetharan Oct 06 '17 at 10:36
A user with your rep must know tricks and importance to format answer. So if the formatting is off, it means you are using phone and it becomes difficult to format there. – Rajesh Oct 06 '17 at 10:41

score 1 · Answer 2 · answered Oct 06 '17 at 10:36

1

Use arrow function to preserve the context

onClickNode: (url, opts) => {
    this.highlightNodes(url, "nodes", true);
}

answered Oct 06 '17 at 10:36

Suren Srapyan

66,568
14
114
112

score 1 · Answer 3 · answered Oct 06 '17 at 10:36

1

When you use function keyword, it hides the scope of this. Use arrow function instead.

Replace this line:

onClickNode: function (url, opts) {

... with this:

onClickNode: (url, opts) => {

answered Oct 06 '17 at 10:36

FAISAL

33,618
10
97
105

this.someFunction(params) is not a function in Angular 4

3 Answers3