todo service

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { TodosIndexComponent } from './todos-index/todos-index.component';
 import { TodosCreateComponent } from './todos-create/todos-create.component';
 
 import { FormsModule } from '@angular/forms';
+import { TodoService } from './todo.service'
 
 @NgModule({
   declarations: [
@@ -17,7 +18,7 @@ import { FormsModule } from '@angular/forms';
     BrowserModule,
     FormsModule
   ],
-  providers: [],
+  providers: [TodoService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/todos-index/todos-index.component.html

@@ -1 +1,4 @@
 <h2>List of Todos</h2>
+<ul>
+    <li *ngFor="let todo of todos">{{todo}}</li>
+</ul>

src/app/todos-index/todos-index.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TodoService } from '../todo.service';
 
 @Component({
   selector: 'app-todos-index',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TodosIndexComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+      private todoService: TodoService
+  ) { }
+
+  todos;
 
   ngOnInit() {
+      this.todos = this.todoService.getTodos();
   }
 
 }