6. Creating Components, Using Components, Templates, Services, Dependency Injection and Directives

app. component.html

<h1>
  {{title}}
</h1>
<courses>
</courses>
<authors>
</authors>

app.component.ts

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  directives: [CoursesComponent,AuthorsComponent],
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Hello World!';
}

course.service.ts

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

courses.component.ts

import { Component } from '@angular/core';
import { CourseService } from './course.service';
import {AutoGrowDirective} from './auto-grow.directive';

@Component({
  selector: 'courses',
  template: `<h2>Courses</h2>
            {{title}}
            <input type = "text" autoGrow />
            <ul>
                <li *ngFor="#course of courses">
                {{ course }}
                </li>
            </ul>
            `,
    providers:[CourseService],
    directives:[AutoGrowDirective]
})

export class CoursesComponent { 
  title = "The title of courses page";
  courses;

  constructor(courseService: CourseService){
      this.courses = courseService.getCourses();
  }
}