Isaac
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
courses.service.ts
app.component.html
<h1>Angular</h1>
<courses></courses>
courses.component.tsimport { 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();
}
}
courses.service.ts
export class CoursesService{
getCourses(){
return ["Course1","Course2","Course3"];
}
}
ASKER
Confused as to what you did? Did you put it all in one file? What did you change?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window