typescript course ongoing

Your Name · Your Name · commit ec34ae6f879d · 2016-11-08T10:28:21.000+01:00
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
@@ -5,7 +5,7 @@
 
         <div class="main-container">
             <div class="list">
-                <course-detail></course-detail>
+                <course-detail [courseDetail]="course$ | async"></course-detail>
             </div>
         </div>
 
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
@@ -1,5 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {CoursesService} from "./services/courses.service";
+import {CourseDetail} from "../../../shared/model/course-detail";
+import {Observable} from "rxjs";
 
 @Component({
   selector: 'app-root',
@@ -8,13 +10,14 @@ import {CoursesService} from "./services/courses.service";
 })
 export class AppComponent implements OnInit {
 
+    course$: Observable<CourseDetail>;
+
     constructor(private coursesService:CoursesService) {
 
     }
 
     ngOnInit() {
-        this.coursesService.loadCourseDetail(1)
-            .subscribe(console.log);
+        this.course$ = this.coursesService.loadCourseDetail(1);
     }
 
 }
diff --git a/client/src/app/course-detail/course-detail.component.html b/client/src/app/course-detail/course-detail.component.html
@@ -1,3 +1,18 @@
-<p>
-  course-detail works!
-</p>
+<h2>{{courseDetail?.description}}</h2>
+
+
+<div class="lessons-list-container v-h-center-block-parent">
+
+    <table class="table lessons-list card card-strong">
+        <tbody>
+        <tr *ngFor="let lesson of courseDetail?.lessons">
+            <td class="lesson-title">{{lesson.description}}</td>
+            <td class="duration">
+                <i class="md-icon duration-icon">access_time</i>
+                <span>{{lesson.duration}}</span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+
+</div>
diff --git a/client/src/app/course-detail/course-detail.component.ts b/client/src/app/course-detail/course-detail.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit ,Input} from '@angular/core';
+import {CourseDetail} from "../../../../shared/model/course-detail";
 
 @Component({
   selector: 'course-detail',
@@ -7,6 +8,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CourseDetailComponent implements OnInit {
 
+  @Input()
+  courseDetail:CourseDetail;
+
   constructor() {
 
 
diff --git a/client/src/app/services/courses.service.ts b/client/src/app/services/courses.service.ts
@@ -13,8 +13,6 @@ export class CoursesService {
 
   }
 
-
-
     loadCourseDetail(courseId: number) :Observable<CourseDetail> {
 
         return this.http.get(`/api/courses/${courseId}`)

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`import {Component, OnInit} from '@angular/core';`
`2`	`2`	`import {CoursesService} from "./services/courses.service";`
	`3`	`+import {CourseDetail} from "../../../shared/model/course-detail";`
	`4`	`+import {Observable} from "rxjs";`
`3`	`5`
`4`	`6`	`@Component({`
`5`	`7`	`selector: 'app-root',`
`@@ -8,13 +10,14 @@ import {CoursesService} from "./services/courses.service";`
`8`	`10`	`})`
`9`	`11`	`export class AppComponent implements OnInit {`
`10`	`12`
	`13`	`+ course$: Observable<CourseDetail>;`
	`14`	`+`
`11`	`15`	`constructor(private coursesService:CoursesService) {`
`12`	`16`
`13`	`17`	`}`
`14`	`18`
`15`	`19`	`ngOnInit() {`
`16`		`- this.coursesService.loadCourseDetail(1)`
`17`		`- .subscribe(console.log);`
	`20`	`+ this.course$ = this.coursesService.loadCourseDetail(1);`
`18`	`21`	`}`
`19`	`22`
`20`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,8 +13,6 @@ export class CoursesService {`
`13`	`13`
`14`	`14`	`}`
`15`	`15`
`16`		`-`
`17`		`-`
`18`	`16`	`loadCourseDetail(courseId: number) :Observable<CourseDetail> {`
`19`	`17`
`20`	`18`	return this.http.get(`/api/courses/${courseId}`)