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

190,482
29
403
383

answered Oct 06 '17 at 10:35

Sajeetharan

203,447
57
330
376

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

62,337
13
111
105

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

31,390
9
89
101

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

3 Answers3