docs(toh-2/ts): copyedits

public/docs/_examples/toh-2/ts/app/app.component.ts

@@ -1,4 +1,4 @@
-// #docregion pt2
+// #docregion
 import { Component } from '@angular/core';
 
 export class Hero {
@@ -42,7 +42,7 @@ const HEROES: Hero[] = [
       </div>
     </div>
   `,
-// #docregion styles-1
+  // #docregion styles
   styles: [`
     .selected {
       background-color: #CFD8DC !important;
@@ -92,18 +92,16 @@ const HEROES: Hero[] = [
       border-radius: 4px 0 0 4px;
     }
   `]
-// #enddocregion styles-1
+  // #enddocregion styles
 })
 export class AppComponent {
   title = 'Tour of Heroes';
   heroes = HEROES;
-// #docregion selected-hero-1
+  // #docregion selected-hero
   selectedHero: Hero;
-// #enddocregion selected-hero-1
+  // #enddocregion selected-hero
 
-// #docregion on-select-1
+  // #docregion on-select
   onSelect(hero: Hero) { this.selectedHero = hero; }
-// #enddocregion on-select-1
+  // #enddocregion on-select
 }
-
-// #enddocregion pt2

public/docs/_examples/toh-2/ts/app/main.ts

@@ -1,7 +1,5 @@
-// #docregion pt1
 import { bootstrap } from '@angular/platform-browser-dynamic';
 
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);
-// #enddocregion pt1

public/docs/ts/latest/tutorial/toh-pt2.jade

@@ -50,7 +50,7 @@ code-example(language="bash").
   ### Creating heroes
   Let’s create an array of ten heroes at the bottom of `app.component.ts`.
 
-+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)')
++makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)')
 
 :marked
   The `HEROES` array is of type `Hero`, the class defined in part one, 
@@ -59,9 +59,9 @@ code-example(language="bash").
   first and display mock heroes.
 
   ### Exposing heroes
-  Let’s create a property in `AppComponent` that exposes the heroes for binding.
+  Let’s create a public property in `AppComponent` that exposes the heroes for binding.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)')
 
 :marked
   We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
@@ -76,7 +76,7 @@ code-example(language="bash").
   Our component has `heroes`. Let’s create an unordered list in our template to display them.
   We’ll insert the following chunk of HTML below the title and above the hero details.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
 
 :marked
   Now we have a template that we can fill with our heroes.
@@ -107,7 +107,7 @@ code-example(language="bash").
     “*take each hero in the `heroes` array, store it in the local `hero` variable,
     and make it available to the corresponding template instance*”.
 
-    The `let` keyword before "hero" identifies the `hero` as a template input variable.
+    The `let` keyword before "hero" identifies `hero` as a template input variable.
     We can reference this variable within the template to access a hero’s properties.
 
     Learn more about `ngFor` and template input variables in the
@@ -130,21 +130,20 @@ code-example(language="bash").
   Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
   to the following CSS classes:
 
-+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (Styling)')
++makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".")
 
 :marked
   Notice that we again use the back-tick notation for multi-line strings.
 
+  That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. 
+  We'll do this in a later chapter. For now let's keep rolling.
+
   When we assign styles to a component they are scoped to that specific component.
   Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
 
   Our template for displaying the heroes should now look like this:
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)')
-
-:marked
-  That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. 
-  We'll do this in a later chapter. For now let's keep rolling.
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
 
 .l-main-section
   :marked
@@ -160,7 +159,7 @@ code-example(language="bash").
     ### Click event
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)')
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)')
 
   :marked
     Focus on the event binding
@@ -190,21 +189,21 @@ code-example(language="bash").
     We no longer need the static `hero` property of the `AppComponent`.
     **Replace** it with this simple `selectedHero` property:
 
-  +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)')
+  +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)')
 
   :marked
     We’ve decided that none of the heroes should be selected before the user picks a hero so
     we won’t initialize the `selectedHero` as we were doing with `hero`.
 
     Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
-  +makeExample('toh-2/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)')
+  +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')
 
   :marked
     We will be showing the selected hero's details in our template.
     At the moment, it is still referring to the old `hero` property.
     Let’s fix the template to bind to the new `selectedHero` property.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (Binding to the selectedHero\'s name)')
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
   :marked
     ### Hide the empty detail with ngIf
 
@@ -266,16 +265,16 @@ code-example(language="bash").
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
     We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (Setting the CSS class)')(format=".")
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
   :marked
     Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
-    This is the syntax for a Property Binding, a binding in which data flows one way
+    This is the syntax for a **property binding**, a binding in which data flows one way
     from the data source (the expression `hero === selectedHero`) to a property of `class`.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".")
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
 
   .l-sub-section
     :marked
-      Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
+      Learn more about [property bindings](../guide/template-syntax.html#property-binding)
       in the Template Syntax chapter.
 
   :marked
@@ -290,7 +289,7 @@ code-example(language="bash").
 
     Here's the complete `app.component.ts` as it stands now:
 
-  +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts')
+  +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts')
 
 .l-main-section
 :marked