From 5131e1dee2c08dfab517fd48c3f26bf58c24d5e5 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Tue, 10 Jan 2017 23:26:45 -0500
Subject: [PATCH 01/12] Tour of Heroes init

---
 app/app.component.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index 7fb173cd0..0401529a4 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -1,7 +1,20 @@
 import { Component } from '@angular/core';
 
+export class Hero {
+ 	id: number;
+ 	name: string;
+}
+
+
 @Component({
-  selector: 'my-app',
-  template: `<h1>Hello {{name}}</h1>`,
+ 	selector: 'my-app',
+ 	template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
 })
-export class AppComponent  { name = 'Angular'; }
+
+export class AppComponent  { 
+	title = 'Tour of Heroes';
+ 	hero: Hero = {
+ 		id: 1,
+ 		name: 'Windstorm';
+ 	};
+}

From 1fbd6debdd654abbb91c625fd01659a060733b2a Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <bigraf@gmail.com>
Date: Wed, 11 Jan 2017 12:28:53 -0500
Subject: [PATCH 02/12] Part 1 - through the two-way binding

---
 app/app.component.ts | 14 ++++++++++++--
 app/app.module.ts    |  7 ++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index 0401529a4..6f6c97d96 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -8,13 +8,23 @@ export class Hero {
 
 @Component({
  	selector: 'my-app',
- 	template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
+ 	template:`
+		<h1>{{title}}</h1>
+		<h2>{{hero.name}} details!</h2>
+		<div><label>id: </label>{{hero.id}}</div>
+		<div>
+			<label>name: </label>
+			<input [(ngModel)]="hero.name" placeholder="name">
+		</div>
+		`
+
+
 })
 
 export class AppComponent  { 
 	title = 'Tour of Heroes';
  	hero: Hero = {
  		id: 1,
- 		name: 'Windstorm';
+ 		name: 'Windstorm',
  	};
 }
diff --git a/app/app.module.ts b/app/app.module.ts
index 357b003a5..19f30ab45 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,10 +1,11 @@
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } 		from '@angular/core';
+import { BrowserModule } 	from '@angular/platform-browser';
+import { FormsModule }		from '@angular/forms';
 
 import { AppComponent }  from './app.component';
 
 @NgModule({
-  imports:      [ BrowserModule ],
+  imports:      [ BrowserModule, FormsModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

From accc9c96aa8d521b42581570fbeaee9195a9123b Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Thu, 12 Jan 2017 00:21:40 -0500
Subject: [PATCH 03/12] Test commit from Atom

---
 app/app.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index 6f6c97d96..a27fd1bcf 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -21,10 +21,12 @@ export class Hero {
 
 })
 
-export class AppComponent  { 
+export class AppComponent  {
 	title = 'Tour of Heroes';
  	hero: Hero = {
  		id: 1,
  		name: 'Windstorm',
  	};
 }
+
+//test

From 3d071e83386a6d88a5b7d36cc306dc895a5eaf1d Mon Sep 17 00:00:00 2001
From: rafael <bigraf@users.noreply.github.com>
Date: Thu, 12 Jan 2017 00:23:31 -0500
Subject: [PATCH 04/12] Removed test note

---
 app/app.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index a27fd1bcf..d1ebdfbaf 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -28,5 +28,3 @@ export class AppComponent  {
  		name: 'Windstorm',
  	};
 }
-
-//test

From eb5da4114e1324522e194309880829a03d4bcc7f Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Fri, 13 Jan 2017 00:07:49 -0500
Subject: [PATCH 05/12] Part2:Hero List

---
 app/app.component.ts | 40 +++++++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index d1ebdfbaf..661fd9fa3 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -2,29 +2,51 @@ import { Component } from '@angular/core';
 
 export class Hero {
  	id: number;
- 	name: string;
+  name: string;
 }
 
+const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
+
 
 @Component({
  	selector: 'my-app',
- 	template:`
+ 	template: `
 		<h1>{{title}}</h1>
+    <h2>My Heroes</h2>
+    <ul class="heroes" >
+      <li *ngFor="let hero of heroes">
+        <!--each hero goes here -- >
+        <span class="badge">{{hero.id}}</span> {{hero.name}}
+      </li>
+    </ul>
+
 		<h2>{{hero.name}} details!</h2>
 		<div><label>id: </label>{{hero.id}}</div>
 		<div>
 			<label>name: </label>
 			<input [(ngModel)]="hero.name" placeholder="name">
-		</div>
+    </div>
 		`
 
-
 })
 
-export class AppComponent  {
-	title = 'Tour of Heroes';
- 	hero: Hero = {
- 		id: 1,
- 		name: 'Windstorm',
+export class AppComponent {
+  title = 'Tour of Heroes';
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm',
  	};
+  heroes = HEROES;
+
 }

From 99007403a7ba28b107ae9f85849aa2f7df9cb691 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <bigraf@gmail.com>
Date: Fri, 13 Jan 2017 17:30:39 -0500
Subject: [PATCH 06/12] Added click event

---
 app/app.component.ts | 79 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 66 insertions(+), 13 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index 661fd9fa3..e68acb126 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -25,20 +25,69 @@ const HEROES: Hero[] = [
 		<h1>{{title}}</h1>
     <h2>My Heroes</h2>
     <ul class="heroes" >
-      <li *ngFor="let hero of heroes">
-        <!--each hero goes here -- >
+      <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+	  <!--test comment-->
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
-
-		<h2>{{hero.name}} details!</h2>
-		<div><label>id: </label>{{hero.id}}</div>
-		<div>
-			<label>name: </label>
-			<input [(ngModel)]="hero.name" placeholder="name">
-    </div>
-		`
-
+		<div *ngIf="selectedHero">
+			<h2>{{selectedHero.name}} details!</h2>
+			<div><label>id: </label>{{selectedHero.id}}</div>
+			<div>
+				<label>name: </label>
+				<input [(ngModel)]="selectedHero.name" placeholder="name">
+			</div>
+		</div>
+		`,
+		styles: [`
+		  .selected {
+			background-color: #CFD8DC !important;
+			color: white;
+		  }
+		  .heroes {
+			margin: 0 0 2em 0;
+			list-style-type: none;
+			padding: 0;
+			width: 15em;
+		  }
+		  .heroes li {
+			cursor: pointer;
+			position: relative;
+			left: 0;
+			background-color: #EEE;
+			margin: .5em;
+			padding: .3em 0;
+			height: 1.6em;
+			border-radius: 4px;
+		  }
+		  .heroes li.selected:hover {
+			background-color: #BBD8DC !important;
+			color: white;
+		  }
+		  .heroes li:hover {
+			color: #607D8B;
+			background-color: #DDD;
+			left: .1em;
+		  }
+		  .heroes .text {
+			position: relative;
+			top: -3px;
+		  }
+		  .heroes .badge {
+			display: inline-block;
+			font-size: small;
+			color: white;
+			padding: 0.8em 0.7em 0 0.7em;
+			background-color: #607D8B;
+			line-height: 1em;
+			position: relative;
+			left: -1px;
+			top: -4px;
+			height: 1.8em;
+			margin-right: .8em;
+			border-radius: 4px 0 0 4px;
+		  }
+		`]
 })
 
 export class AppComponent {
@@ -47,6 +96,10 @@ export class AppComponent {
     id: 1,
     name: 'Windstorm',
  	};
-  heroes = HEROES;
-
+	selectedHero: Hero;
+	
+	onSelect(hero: Hero): void {
+		this.selectedHero = hero;
+	}
 }
+

From fc65e4b49474a9f514ae173e6d5207155cb73fd4 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Sat, 14 Jan 2017 09:53:23 -0500
Subject: [PATCH 07/12] List and click handler complete

---
 app/app.component.ts | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index e68acb126..d3eaf2863 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -6,27 +6,23 @@ export class Hero {
 }
 
 const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
+  { id: 11, name: 'Batman' },
+  { id: 12, name: 'Hulk Smash' },
+  { id: 13, name: 'Alex The Great' },
+  { id: 14, name: 'Daniel The Great' },
+  { id: 15, name: 'Mommy and Layla Together' },
+  { id: 16, name: 'Papa the mad scientist' },
 ];
 
 
 @Component({
  	selector: 'my-app',
- 	template: `
+
+  template: `
 		<h1>{{title}}</h1>
     <h2>My Heroes</h2>
     <ul class="heroes" >
       <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
-	  <!--test comment-->
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
@@ -37,9 +33,10 @@ const HEROES: Hero[] = [
 				<label>name: </label>
 				<input [(ngModel)]="selectedHero.name" placeholder="name">
 			</div>
-		</div>
+	  </div>
 		`,
-		styles: [`
+
+    styles: [`
 		  .selected {
 			background-color: #CFD8DC !important;
 			color: white;
@@ -96,10 +93,10 @@ export class AppComponent {
     id: 1,
     name: 'Windstorm',
  	};
-	selectedHero: Hero;
-	
+  heroes = HEROES;
+  selectedHero: Hero;
+
 	onSelect(hero: Hero): void {
 		this.selectedHero = hero;
 	}
 }
-

From 48f624a5038160a12c62cde398db0e79781c7037 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Sat, 21 Jan 2017 12:19:12 -0500
Subject: [PATCH 08/12] Componentized part 1, added stop script to package.json

---
 app/app.component.ts         | 24 ++++++++++++------------
 app/hero-detail.component.ts | 19 +++++++++++++++++++
 app/hero.ts                  |  0
 package.json                 |  3 ++-
 4 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 app/hero-detail.component.ts
 create mode 100644 app/hero.ts

diff --git a/app/app.component.ts b/app/app.component.ts
index d3eaf2863..142f4c3a7 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -26,17 +26,17 @@ const HEROES: Hero[] = [
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
-		<div *ngIf="selectedHero">
-			<h2>{{selectedHero.name}} details!</h2>
-			<div><label>id: </label>{{selectedHero.id}}</div>
-			<div>
-				<label>name: </label>
-				<input [(ngModel)]="selectedHero.name" placeholder="name">
-			</div>
-	  </div>
+    <div *ngIf="selectedHero">
+      <h2>{{selectedHero.name}} details!</h2>
+      <div><label>id: </label>{{selectedHero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="selectedHero.name" placeholder="name">
+      </div>
+    </div>
 		`,
 
-    styles: [`
+  styles: [`
 		  .selected {
 			background-color: #CFD8DC !important;
 			color: white;
@@ -96,7 +96,7 @@ export class AppComponent {
   heroes = HEROES;
   selectedHero: Hero;
 
-	onSelect(hero: Hero): void {
-		this.selectedHero = hero;
-	}
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
 }
diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts
new file mode 100644
index 000000000..a3facffaf
--- /dev/null
+++ b/app/hero-detail.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-hero-detail',
+  template: `
+    <div *ngIf="hero">
+      <h2>{{hero.name }} details!</h2>
+      <div><label>id: </label>{{hero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input[(ngModel)]="hero.name" placeholder= "name">
+      </div>
+    </div>
+    `
+})
+
+export class HeroDetailComponent {
+  hero: Hero;
+}
diff --git a/app/hero.ts b/app/hero.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/package.json b/package.json
index b806db2c9..1cc39c1b8 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "test-once": "tsc && karma start karma.conf.js --single-run",
     "tsc": "tsc",
-    "tsc:w": "tsc -w"
+    "tsc:w": "tsc -w",
+    "stop": "killall node"
   },
   "keywords": [],
   "author": "",

From 795c6ca6b9c26b4a185f53c60daa1f9fbcaedc5d Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Tue, 31 Jan 2017 23:04:39 -0500
Subject: [PATCH 09/12] Completed conversion

---
 app/app.component.ts | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/app.component.ts b/app/app.component.ts
index 142f4c3a7..105390586 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
+import { Hero } from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
 
-export class Hero {
- 	id: number;
-  name: string;
-}
 
 const HEROES: Hero[] = [
   { id: 11, name: 'Batman' },
@@ -26,14 +24,8 @@ const HEROES: Hero[] = [
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
-    <div *ngIf="selectedHero">
-      <h2>{{selectedHero.name}} details!</h2>
-      <div><label>id: </label>{{selectedHero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="selectedHero.name" placeholder="name">
-      </div>
-    </div>
+
+    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
 		`,
 
   styles: [`
@@ -87,12 +79,10 @@ const HEROES: Hero[] = [
 		`]
 })
 
+
 export class AppComponent {
   title = 'Tour of Heroes';
-  hero: Hero = {
-    id: 1,
-    name: 'Windstorm',
- 	};
+  
   heroes = HEROES;
   selectedHero: Hero;
 

From 651768c2e8942b600496c74e758ced62cd333658 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Tue, 31 Jan 2017 23:04:57 -0500
Subject: [PATCH 10/12] Completed conversion

---
 app/app.module.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/app.module.ts b/app/app.module.ts
index 19f30ab45..ae73f66b9 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -3,10 +3,17 @@ import { BrowserModule } 	from '@angular/platform-browser';
 import { FormsModule }		from '@angular/forms';
 
 import { AppComponent }  from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent
+  ],
+  bootstrap: [ AppComponent ]
 })
 export class AppModule { }

From 142e835bde9aa8271ed3fab8560cdbe796b7d3a4 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Tue, 31 Jan 2017 23:05:27 -0500
Subject: [PATCH 11/12] Completed conversion

---
 app/hero-detail.component.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts
index a3facffaf..cd44f6ff9 100644
--- a/app/hero-detail.component.ts
+++ b/app/hero-detail.component.ts
@@ -1,19 +1,21 @@
 import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
 
 @Component({
   selector: 'my-hero-detail',
   template: `
     <div *ngIf="hero">
-      <h2>{{hero.name }} details!</h2>
+      <h2>{{hero.name}} details!</h2>
       <div><label>id: </label>{{hero.id}}</div>
       <div>
         <label>name: </label>
-        <input[(ngModel)]="hero.name" placeholder= "name">
+        <input [(ngModel)]="hero.name" placeholder="name"/>
       </div>
     </div>
-    `
+  `
 })
 
 export class HeroDetailComponent {
+  @Input()
   hero: Hero;
 }

From 855e50158f0c202ee5979c705b49ac9a230a7c15 Mon Sep 17 00:00:00 2001
From: Rafael Sotomayor <Home@Rafaels-MBP.attlocal.net>
Date: Tue, 31 Jan 2017 23:05:37 -0500
Subject: [PATCH 12/12] Completed conversion

---
 app/hero.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/hero.ts b/app/hero.ts
index e69de29bb..e3eac516d 100644
--- a/app/hero.ts
+++ b/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}