make it todo list dynamic

src/app/todo/todo.component.html

@@ -12,23 +12,13 @@ <h1>Todo</h1>
     <input id="toggle-all" class="toggle-all" type="checkbox">
 
     <ul class="todo-list">
-      <!-- These are here just to show the structure of the list items -->
-      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
-      <li class="completed">
+      <li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
         <div class="view">
-          <input class="toggle" type="checkbox" checked>
-          <label>Install angular-cli</label>
+          <input class="toggle" type="checkbox" [checked]="todo.isDone">
+          <label>{{todo.title}}</label>
           <button class="destroy"></button>
         </div>
-        <input class="edit" value="Create a TodoMVC template">
-      </li>
-      <li>
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label>Understand Angular2 apps</label>
-          <button class="destroy"></button>
-        </div>
-        <input class="edit" value="Rule the web">
+        <input class="edit" value="{{todo.title}}">
       </li>
     </ul>
   </section>

src/app/todo/todo.component.ts

@@ -1,15 +1,27 @@
 import { Component, OnInit } from '@angular/core';
+import { TodoService } from './todo.service';
 
 @Component({
   selector: 'app-todo',
   templateUrl: './todo.component.html',
-  styleUrls: ['./todo.component.scss']
+  styleUrls: ['./todo.component.scss'],
+  providers: [TodoService]
 })
 export class TodoComponent implements OnInit {
+  private todos;
+  private activeTasks;
 
-  constructor() { }
+    constructor(private todoService: TodoService) { }
 
-  ngOnInit() {
-  }
+    getTodos(){
+      return this.todoService.get().then(todos => {
+        this.todos = todos;
+        this.activeTasks = this.todos.filter(todo => todo.isDone).length;
+      });
+    }
+
+    ngOnInit() {
+      this.getTodos();
+    }
 
 }

src/app/todo/todo.service.ts

@@ -1,9 +1,20 @@
 import { Injectable } from '@angular/core';
 
+const TODOS = [
+  { title: 'Install Angular CLI', isDone: true },
+  { title: 'Style app', isDone: true },
+  { title: 'Finish service functionality', isDone: false },
+  { title: 'Setup API', isDone: false },
+];
+
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
 
   constructor() { }
+
+  get() {
+    return new Promise(resolve => resolve(TODOS));
+  }
 }