Angular2 - not displaying data from component

Question

I am following a course on Angular2 beta versiopn, where I have 2 components whose data I am trying to display. This is my app.component:

import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'

@Component({
    selector: 'my-app',
    template: `
        <h1>Hello Angular 2 App</h1>
        <courses></courses>
        <authors></authors>
        `,
    directives: [CoursesComponent, AuthorsComponent]
})
export class AppComponent { }

And this is the courses component:

import {Component} from 'angular2/core';
import {CourseService} from './course.service';
import {AutoGrowDirective} from './auto-grow.directive';

@Component({
  selector: 'courses',
  template: `
    <h2>{‌{ title }}</h2>
    <input type="text" autoGrow />
    <ul>
      <li *ngFor="#course of courses">
      {‌{ course }}
      </li>
    </ul>
    `,
  providers: [CourseService],
  directives: [AutoGrowDirective]
})
export class CoursesComponent {
  title: string = "The title of courses page";
  courses;

  constructor(courseService: CourseService) {
    this.courses = courseService.getCourses();
  }
}

And this is the author component:

import {Component} from 'angular2/core'
import {AuthorService} from './author.service'

@Component({
  selector: 'authors',
  template: `
    <h2>{{ title }}</h2>
    <ul>
      <li *ngFor="#author of authors">
      {{ author }}
      </li>
    </ul>
    `,
  providers: [AuthorService]
})

export class AuthorsComponent {
  title: string = "The title of authors page";
  authors;

  constructor(authorService: AuthorService) {
    this.authors = authorService.getAuthors();
  }
}

The interpolated data from authors component is displaying but not from courses component. I don't know why, and how can I debug it?

Update

I managed to show the data with this code:

@Component({
  selector: 'courses',
  template: `
    <h2>{{ title }}</h2>
    <input type="text" autoGrow />
    <ul>
      <li *ngFor="#course of courses">
      {{ course }}
      </li>
    </ul>
    `,
  providers: [CourseService],
  directives: [AutoGrowDirective]
})

export class CoursesComponent {
  title: string = "The title of courses page";
  courses;

  constructor(courseService: CourseService) {
    this.courses = courseService.getCourses();
  }
}

If someone can explain me what is the difference in this code and the first one in the question, I would be very grateful, because I can't see any difference other than an empty row between component decorator and the class declaration? Even when I just copy paste the code from here and make that space I still can't get it to show the data, but when I use the code that I showed here now, then it works! How, why? I how can I debug the app, when get myself in this situations? And, there were no errors in the console, when the data wasn't showing up.

Answer 1

I would check out this article:

Difference between Constructor and ngOnInit

It is generally better practice to initialize your service in the constructor and use the angular "ngOnInit" to call your service. The article explains thoroughly why.