Angular 5: Service Getter Why Double Arrow if Referenced to Getter instead of Calling Getter Directly

Question

I have a service which is loading basic system information which I want to share between several components.

If I make a getter method this in the getter becomes the component's this if I not use double arrows in the service.

service

import { Injectable } from '@angular/core';

@Injectable()
export class WhoAmIService {

  constructor() { }
  whoAmI = 'I\'m a service'
  getterOne(): string {
    return this.whoAmI
  }
  getterTwo = (): string => {
    return this.whoAmI
  }  

}

component

import { Component } from '@angular/core';
import { WhoAmIService } from './who-am-i.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  whoAmI = 'I\'m a component'
  getterOne: Function
  getterTwo: Function
  constructor(
    private whoAmIService: WhoAmIService
  ) {
    this.getterOne = whoAmIService.getterOne
    this.getterTwo = whoAmIService.getterTwo
    console.log('cool', whoAmIService.getterOne())
    console.log('cool', whoAmIService.getterTwo())
    console.log('why is this different', this.getterOne())
    console.log('cool', this.getterTwo())    
  }
}

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

Question

Why do I need the arrow function if I assign the getter function to the component?

I can't explain this to you in technical terms but if you follow this link and see how typescript gets trans-piled, you will understand it. http://www.typescriptlang.org/play/#src=export%20class%20WhoAmIService%20%7B%0D%0A%0D%0A%20%20%20%20constructor()%20%7B%20%7D%0D%0A%20%20%20%20whoAmI%20%3D%20'I%5C'm%20a%20service'%0D%0A%20%20%0D%0A%20%20%20%20getterOne()%3A%20string%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20this.whoAmI%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20getterTwo%20%3D%20()%3A%20string%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20this.whoAmI%0D%0A%20%20%20%20%7D%0D%0A%7D — Avin Kavish, Oct 13 '18 at 09:37

SiddAjmera · Answer 1 · 2018-10-13T09:42:22.510

For normal function syntax, the scope of this generally changes resulting in unexpected behavior. That's what's happening in your case.

The newer Arrow Function syntax fixes this issue by retaining the scope of this. That's why you can simply rely on it to make it work and show the expected behavior.

If you still want to make it work using the old function syntax, you'll have to bind the service instance as shown below:

console.log('why is this different', this.getterOne.bind(this.whoAmIService)());

Here are a few articles and SO OPs for your ref:

Here's your Updated StackBlitz for any ref.

Ok so `=>` s always superior to bind, then I will use always the arrow fn if I reference to this inside the function. — Andi Giga, Oct 13 '18 at 10:21

score 1 · Accepted Answer · answered Oct 13 '18 at 09:47

Whenever function is assigned to any other variable, actually copies the function definition and act as new function which has the same codes.

You can think as it is clone of the original function.

Now important point is the context where this function is getting executed. So this is nothing but the context where is it being executed.

Now lets come back to your example

whoAmIService.getterOne() - this getting executed on inside the whoAmIServiceso the context (this) point to whoAmIService.
this.getterOne() - Here this will point to AppComponent class since the context is AppComponent.

Note : This is nothing to do with Angular. Its Javascript concept.

Just visit this for more info - https://hackernoon.com/execution-context-in-javascript-319dd72e8e2c

Thx, That is the important point: `actually copies the function definition` — Andi Giga, Oct 13 '18 at 10:19

Angular 5: Service Getter Why Double Arrow if Referenced to Getter instead of Calling Getter Directly

service

component

Question

2 Answers2