<repo_name>AntonArtomov/AngularMentoringHometask<file_sep>/src/app/course-list/course-list/course-list.component.ts
import { Component, OnInit } from '@angular/core';
import { CourseListItem } from 'src/app/course-list/course-list-item';
import { CourseService} from '../course.service'

@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html',
  styleUrls: ['./course-list.component.css']
})
export class CourseListComponent implements OnInit {

  public courses: CourseListItem[] = []

  constructor(private courseService: CourseService) { }

  ngOnInit() {
    this.courses = this.courseService.getCourseItems();
  }

  onCourseDeleted(course){
    console.log(course.Id + ' is deleted')
  }

  onLoadMoreClick() {
    console.log("load more clicked");
  }

}
<file_sep>/src/app/course-list/course-list-item/course-list-item.component.ts
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import { CourseListItem } from 'src/app/course-list/course-list-item';

@Component({
  selector: 'course-list-item',
  templateUrl: './course-list-item.component.html',
  styleUrls: ['./course-list-item.component.css']
})
export class CourseListItemComponent implements OnInit {
  @Input() public courseItem: CourseListItem;

  @Output() courseDeleted: EventEmitter<number> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  deleteCourse() {
    this.courseDeleted.emit();
  }
}
<file_sep>/src/app/course-list/course.service.ts
import { Injectable } from '@angular/core';
import { CourseListItem } from 'src/app/course-list/course-list-item';

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  constructor() { }

  public getCourseItems(): CourseListItem[] {
    return [
      {
        Id:1,
        Title: "Video Course 1",
        CreationDate: new Date("Jan 1,2018"),
        Duration: 88,
        Description: "something very interesting, part 1. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla"
      },
      {
        Id:2,
        Title: "Video Course 2",
        CreationDate: new Date("Jun 8,2018"),
        Duration: 98,
        Description: "something very interesting, part 1. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla"
      },
      {
        Id:3,
        Title: "Video Course 3",
        CreationDate: new Date("Aug 22,2018"),
        Duration: 58,
        Description: "something very interesting, part 1. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla"
      },
      {
        Id:4,
        Title: "Video Course 4",
        CreationDate: new Date("Sep 3,2018"),
        Duration: 128,
        Description: "something very interesting, part 1. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla. Bla-bla-bla"
      }     
    ]
  }
}
