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 angular.io/docs/ts/latest/tutorial But if you want to stick to beta, that's fine too :) — AVJT82
– AVJT82, Commented Jan 31, 2017 at 16:16
are you getting Template parse errors in your developer console ? — Deep
– Deep, Commented Jan 31, 2017 at 17:10

Community · Accepted Answer · 2017-05-23 12:32:35Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Jan 31, 2017 at 16:23

Andrew Mogg

1026 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 - not displaying data from component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related