part 2

src/app/app.component.html

@@ -1,20 +1,11 @@
 <section class="todoapp">
-  <header class="header">
-    <h1>Todos</h1>
-    <input class="new-todo" placeholder="what needs to be done ?" autofocus="" [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()">
-  </header>
-  <section class="main" *ngIf="todos.length > 0">
-    <ul>
-      <li *ngFor="let todo of todos" [class.complete]="todo.complete">
-        <div class="view">
-          <input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">
-          <label>{{ todo.title }}</label>
-          <button class="destroy" (click)="removeTodo(todo)"></button>
-        </div>
-      </li>
-    </ul>
-  </section>
-  <footer class="footer" *ngIf="todos.length > 0">
-    <span class="todo-count"><strong>{{ todos.length }}</strong> {{ todos.length == 1 ? "item" : "items"}} left</span>
-  </footer>
+  <app-todo-list-header (add)="onAddTodo($event)"></app-todo-list-header>
+  <app-todo-list
+    [todos]="todos"
+    (toggleComplete)="onToggleTodoComplete($event)"
+    (remove)="onRemoveTodo($event)"
+  ></app-todo-list>
+  <app-todo-list-footer
+    [todos]="todos"
+  ></app-todo-list-footer>
 </section>

src/app/app.component.ts

@@ -2,26 +2,30 @@ import { TodoDataService } from './TodoData.service';
 import { Component } from '@angular/core';
 import { Todo } from './todo';
 
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  providers: [TodoDataService]
+  providers: [],
 })
 export class AppComponent {
-  title = 'todo-app';
-  newTodo: Todo = new Todo();
+  //newTodo: Todo = new Todo();
 
   constructor(private todoDataService: TodoDataService){}
 
-  addTodo(){
-    this.todoDataService.addTodo(this.newTodo);
-    this.newTodo = new Todo();
+  // addTodo(){
+  //   this.todoDataService.addTodo(this.newTodo);
+  //   this.newTodo = new Todo();
+  // }
+  onAddTodo(todo: Todo){
+    this.todoDataService.addTodo(todo);
   }
-  toggleTodoComplete(todo){
+
+  onToggleTodoComplete(todo){
     this.todoDataService.toggleTodoComlete(todo);
   }
-  removeTodo(todo){
+  onRemoveTodo(todo){
     this.todoDataService.deleteTodoById(todo.id);
   }
   get todos(){

src/app/app.module.ts

@@ -1,16 +1,26 @@
+import { TodoDataService } from './TodoData.service';
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { TodoListHeaderComponent } from './todo-list-header/todo-list-header.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
+import { TodoListItemComponent } from './todo-list-item/todo-list-item.component';
+import { TodoListFooterComponent } from './todo-list-footer/todo-list-footer.component';
 
 @NgModule({
   declarations: [
-    AppComponent
-  ],
+    AppComponent,
+      TodoListHeaderComponent,
+      TodoListComponent,
+      TodoListItemComponent,
+      TodoListFooterComponent
+   ],
   imports: [
-    BrowserModule
+    BrowserModule,FormsModule
   ],
-  providers: [],
+  providers: [TodoDataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/todo-list-footer/todo-list-footer.component.html

@@ -0,0 +1,3 @@
+<footer class="footer" *ngIf="todos.length > 0">
+  <span class="todo-count"><strong>{{ todos.length }}</strong> {{ todos.length == 1 ? "item" : "items"}} left</span>
+</footer>

src/app/todo-list-footer/todo-list-footer.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TodoListFooterComponent } from './todo-list-footer.component';
+
+describe('TodoListFooterComponent', () => {
+  let component: TodoListFooterComponent;
+  let fixture: ComponentFixture<TodoListFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-list-footer/todo-list-footer.component.ts

@@ -0,0 +1,17 @@
+import { Todo } from './../todo';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-list-footer',
+  templateUrl: './todo-list-footer.component.html',
+})
+export class TodoListFooterComponent implements OnInit {
+
+  @Input() todos: Todo[];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/todo-list-header/todo-list-header.component.html

@@ -0,0 +1,4 @@
+<header class="header">
+  <h1>Todos</h1>
+  <input class="new-todo" placeholder="what needs to be done ?" autofocus="" [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()">
+</header>

src/app/todo-list-header/todo-list-header.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TodoListHeaderComponent } from './todo-list-header.component';
+
+describe('TodoListHeaderComponent', () => {
+  let component: TodoListHeaderComponent;
+  let fixture: ComponentFixture<TodoListHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-list-header/todo-list-header.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Todo } from '../todo';
+
+@Component({
+  selector: 'app-todo-list-header',
+  templateUrl: './todo-list-header.component.html',
+})
+export class TodoListHeaderComponent implements OnInit {
+  newTodo: Todo = new Todo();
+
+  @Output() add:EventEmitter<Todo> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  addTodo(){
+    this.add.emit(this.newTodo);
+    this.newTodo = new Todo();
+  }
+
+}

src/app/todo-list-item/todo-list-item.component.html

@@ -0,0 +1,5 @@
+<div class="view">
+  <input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">
+  <label>{{ todo.title }}</label>
+  <button class="destroy" (click)="removeTodo(todo)"></button>
+</div>

src/app/todo-list-item/todo-list-item.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TodoListItemComponent } from './todo-list-item.component';
+
+describe('TodoListItemComponent', () => {
+  let component: TodoListItemComponent;
+  let fixture: ComponentFixture<TodoListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-list-item/todo-list-item.component.ts

@@ -0,0 +1,29 @@
+import { Todo } from './../todo';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-list-item',
+  templateUrl: './todo-list-item.component.html',
+})
+export class TodoListItemComponent implements OnInit {
+
+  @Input() todo: Todo;
+
+  @Output() remove: EventEmitter<Todo> = new EventEmitter();
+
+  @Output() toggleComplete: EventEmitter<Todo> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  removeTodo(todo: Todo){
+    this.remove.emit(todo);
+  }
+
+  toggleTodoComplete(todo: Todo){
+    this.toggleComplete.emit(todo);
+  }
+
+}

src/app/todo-list/todo-list.component.html

@@ -0,0 +1,12 @@
+<section class="main" *ngIf="todos.length > 0">
+  <ul>
+    <li *ngFor="let todo of todos" [class.complete]="todo.complete">
+      <app-todo-list-item
+        [todo]="todo"
+        (toggleComplete)="onToggleTodoComplete($event)"
+        (remove)="onRemoveTodo($event)"
+      >
+      </app-todo-list-item>
+    </li>
+  </ul>
+</section>

src/app/todo-list/todo-list.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-list/todo-list.component.ts

@@ -0,0 +1,29 @@
+import { Todo } from './../todo';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+})
+export class TodoListComponent implements OnInit {
+
+  @Input() todos: Todo[];
+
+  @Output() remove: EventEmitter<Todo> = new EventEmitter();
+
+  @Output() toggleComplete: EventEmitter<Todo> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onToggleComplete(todo: Todo){
+    this.toggleComplete.emit(todo);
+  }
+
+  onRemoveTodo(todo: Todo){
+    this.remove.emit(todo);
+  }
+
+}