How to provide 'this' context, which points to an Angular 6 component instance?

Question

I have a working demo with Earth globe, based on D3 and JS. Now I'm trying to create an Angular 6 component out of it.

Here is full demo without Angular:

import * as d3 from 'd3v4';

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

@Component({
  selector: 'earth-globe',
  templateUrl: './earth-globe.component.html',
  styleUrls: ['./earth-globe.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class EarthGlobeComponent implements AfterContentInit {
  private canvas;
  getCountry(c) {
    console.log('Country is: ', c);
  }

  mousemove() {
    console.log('mousemove()::this==', this); // now 'this' points to canvas, which is CORRECT
    // console.log('globe==', globe);
    console.log('ev==', event); // but I also need event
    const c = this.getCountry(this); // and acces to this.getCountry
  }


  ngAfterContentInit() {
    this.canvas = d3.select('#globe');
    this.canvas
      .on('mousemove', this.mousemove)
  }
}

http://jsfiddle.net/up715k2n/

Here is simplified Angular component demo:

https://stackblitz.com/edit/angular-dohwvt

If you move a mouse, the app will console.log 'this'. And in both demos I have 'this' pointing to the canvas, which is correct.

But in Angular example the app has an error:

this.getCountry is not a function

because 'getCountry' is a component method, not canvas.

So, I'm trying to find the way to get both contexts - canvas and component.

How to do it?

https://stackblitz.com/edit/angular-rlttwv?file=src/app/earth-globe.component.ts - points to the component

https://stackblitz.com/edit/angular-xjahkl?file=src/app/earth-globe.component.ts - points to the canvas

https://stackblitz.com/edit/angular-dch9ws?file=src/app/earth-globe.component.ts — yurzui, Sep 24 '18 at 18:34
@yurzui why can't you gave this as an answer? seems like a perfect solution — Arun, Sep 24 '18 at 18:40
not really. Now mousemove()::this point to the component instance, but it should point to the 'canvas' — alexfrize, Sep 24 '18 at 18:41
Please post the code that you have problems with in your question, not a link to it. — Bergi, Sep 24 '18 at 18:42
Yes. I do have this.canvas, but I also need to access getCountry method without losing context of this.canvas. That's the main issue. I need both of them. — alexfrize, Sep 24 '18 at 18:53
You have `this`(points to component instance) and canvas context in `this.canvas`. — yurzui, Sep 24 '18 at 18:54
@yurzui , It should, but it's not working as expected. I'll create a new fiddle to demonstrate it — alexfrize, Sep 24 '18 at 18:59
@yurzui, I updated my question, added 2 links for better explaination — alexfrize, Sep 24 '18 at 19:15
`this.canvas.node()` should help you to get access to single instance of canvas. See also https://stackblitz.com/edit/angular-tkocje?file=src%2Fapp%2Fearth-globe.directive.ts — yurzui, Sep 24 '18 at 20:15
@yurzui, thank you so much! It looks like you helped me to solve not only this problem, but many other. Really appreciate your help! — alexfrize, Sep 24 '18 at 22:04

Vasiliy vvscode Vanchuk · Answer 1 · 2018-09-25T04:59:36.363

0

You could use next syntax (it's not part of standart, but supports with babel )

  // instead of mouse() {
  mousemove = () => {
    console.log('mousemove()::canvas==', this.canvas); // <-- canvas
    console.log('component==', this); // <-- component
    console.log('ev==', event);
    const c = this.getCountry(this);
  }

it would bind the context inside the method

old style fix instead of this would be

  ngAfterContentInit() {
    this.canvas = d3.select('#globe');
    this.canvas
      .on('mousemove', this.mousemove.bind(this)) // <-- changes is .bind(this)
  }

https://javascriptweblog.wordpress.com/2015/11/02/of-classes-and-arrow-functions-a-cautionary-tale/

edited Sep 25 '18 at 04:59

answered Sep 24 '18 at 18:41

Vasiliy vvscode Vanchuk

7,007
2
21
44

This will not work. 'this' will point to the component instance, but lose the 'canvas'. The main issue is that I need both of them. – alexfrize Sep 24 '18 at 18:49
`this` could reffer to the only one object. In example above - it would be a component. if you need canvas - use `this.canvas` to get access, check updated code – Vasiliy vvscode Vanchuk Sep 25 '18 at 04:58

How to provide 'this' context, which points to an Angular 6 component instance?

1 Answers1