• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 81
  • Last Modified:

service directive not working in angular

My <courses> is not being listed out in my 'app.component.html' file.  The reason is because 'this.courses = service.getCourses();' in my 'courses.component.ts' file return undefined and I'm not sure why.  I am new to Angular and was going through a udemy course.

app.component.html
<h1>Angular</h1>
<courses></courses>

Open in new window

courses.component.ts
import { CoursesService } from './courses.service';
import { Component } from '@angular/core';

@Component({
    selector: 'courses',
    template: `
          <h2>{{Title}}</h2>
          <li *ngFor="let course of courses">
            {{ course }}
          </li>
          `
})

export class CoursesComponent{
    title = "List of courses";
    courses;

    // getTitle(){
    //     return this.title;
    // }

    constructor(){
        let service = new CoursesService();
        console.log("service:"+service.getCourses())
        this.courses = service.getCourses();
    }
}

Open in new window


courses.service.ts
export class CoursesService{
    getCourses(){
        return ["Course1","Course2","Course3"];
    }
}

Open in new window

1
Isaac
Asked:
Isaac
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
please confirm it work fine like this :

import { Component } from '@angular/core';

export class CoursesService{
    getCourses(){
        return ["Course1","Course2","Course3"];
    }
}

@Component({
    selector: 'courses',
    template: `
          <h2>{{Title}}</h2>
          <li *ngFor="let course of courses">
            {{ course }}
          </li>
          `
})

export class CoursesComponent{
    title = "List of courses";
    courses;

    // getTitle(){
    //     return this.title;
    // }

    constructor(){
        let service = new CoursesService();
        console.log("service:"+service.getCourses())
        this.courses = service.getCourses();
    }
}

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Confused as to what you did?  Did you put it all in one file?  What did you change?
0
 
leakim971PluritechnicianCommented:
yes, no more "import { CoursesService } from './courses.service';",
all in the same file for testing purpose
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now