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.

Not an answer, but I would perhaps reconsider if you are just starting to learn Angular, that you would upgrade to final version. I mean, Angular 4 beta is already out ;) If you are looking for tutorials, I think that the TOH tutorial covers everything pretty good https://angular.io/docs/ts/latest/tutorial/ But if you want to stick to beta, that's fine too :) — AT82, Jan 31 '17 at 16:16
are you getting Template parse errors in your developer console ? — Deep, Jan 31 '17 at 17:10

score 1 · Answer 1 · edited May 23 '17 at 12:32

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 31 '17 at 16:23

Andrew Mogg

102
6

Angular2 - not displaying data from component

1 Answers1