Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

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

Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

Avatar of Isaac

ASKER

Confused as to what you did?  Did you put it all in one file?  What did you change?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial