How do functions defined with => get called in Angular?

In the following arrow function heroes => this.heroes = heroes

Yes, return is implied, this may or may not be a problem depending on the rest of your code. I'm assuming in your case, you're not looking to return the assignment, you just want the assignment to happen.

So all you have to do is wrap the result in braces like so heroes => {this.heroes = heroes}, now nothing is returned.

As for your second question, who calls the inner arrow function: From the looks of your code, this.heroService.getHeroes() returns an observable. In your code you have "subscribed" to the observable. The easy way to think about is that the observable is telling your subscription to run the arrow function.

Basically, you are observing the observable. The observable needs time to think about it's response which is why you need to subscribe to it. When it is ready it will tell you it's response, and your arrow function inside the subscription is your response to the observable response. This is a very non-technical description to give you some intuition.

You should research observables/async functions to get a clear understanding.

In the example code you provided,to return a list of heros, we have to write it like

getHeroes(): Hero[] {  
this.heroService.getHeroes()
      .subscribe(heroes => ({heroes : heroes}));
}

Above arrow function will translate to

f( heroes )
{
   return this.heroes = heroes;
}

Otherwise, the code you provided, its just making an assignment to this.heros variable, so return statement does not apply, and the arrow function translate to

f( heroes )
{
   this.heroes = heroes;
}

Further explanation of Arrow function

Arrow functions, like function expressions, can be used to return an object literal expression. The only caveat is that the body needs to be wrapped in parentheses, in order to distinguish between a block and an object (both of which use curly brackets).

Example

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name    
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

For a regular function, if the ‘this’ keyword were inside an object’s method (a function that belongs to an object), it would refer to the object. While in an arrow function, ‘this’, always references the owner of the function it is in. Adding a console.log(this) before the return in the arrow function returns a Window object.

Example

// ES5
const brunch = {
 food: 'Dim sum',
 beverage: 'Jasmine tea',
 order: function() {
    return `I'll have the ${this.food} with ${this.beverage} please.`
 }
}
brunch.order(); //"I'll have the Dim sum with Jasmine tea please."
// ES6
const brunch = {
 food: 'Dim sum',
 beverage: 'Jasmine tea',
 order: () => {
    return `I'll have the ${this.food} with ${this.beverage} please.`
 }
}
brunch.order(); //"I'll have the undefined with undefined please."

this.heroService.getHeroes() returns a subscription object. In order to subscribe to it we should use .subscribe(heroes => this.heroes = heroes);.
subscribe maps the subscription object and extracts the data from the object and puts it in this.heroes, the first param inside the subscribe.

Then with the => operator we start writing actions like affectation, displaying, or anything to do, you can do anything after => in order to write more than one action you should use the braces like this:

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => { console.log('ur data from the observable',heroes);
                  this.heroes = heroes
              });
}