Angular 2.0 Demo Tutorial - Explanation - service

Question

I am following up the Heros tutorial from angular 2.0 section.5 services.
The documentation says its not necessary to wrap the this.heroes inside a function
constructor(private heroService: HeroService) { }
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
which doesnt work. and getting error as
Error: TypeError: Cannot read property 'getHeroes' of undefined(…)
Whereas if i use onInit then it works (the completion of the section).
constructor(private heroService: HeroService) {
}
ngOnInit() {
this.getHeroes();
}
getHeroes() {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
Why i am getting the result only while running under ngOnInit?

Answer 1

My understanding is that the component class is a kind of toolbox, where you define properties and methods.
Methods will then respond to Angular hooks - like ngAfterViewInit or ngOnInit - or to events, like click().
Sometimes components need to load data when they are instanciated, in which case you can use ngOnInit or constructor to call your loading method.
You do not directly call methods in your class definition. I think that if you did, it could be an issue when importing a class, or when extending a class.
You don't want the class to go fetch your data each time you import your class; rather, you want to have complete control over when your data will be imported.
Here are the best practices for Angular 2