docs(toh-2): move app.component.1.html (#3488)

Author: wardbell

public/docs/_examples/toh-2/ts/app/app.component.1.html renamed to public/docs/_examples/toh-2/ts/src/app/app.component.1.html

@@ -61,7 +61,7 @@ code-example(language="sh" class="code-shell").
   Create a public property in `AppComponent` that exposes the heroes for binding.
 
 
-+makeExample('toh-2/ts/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')
++makeExample('toh-2/ts/src/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')
 
 :marked
   The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
@@ -77,7 +77,7 @@ code-example(language="sh" class="code-shell").
   insert the following chunk of HTML below the title and above the hero details.
 
 
-+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')
++makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')
 
 :marked
   Now you can fill the template with hero names.
@@ -89,7 +89,7 @@ code-example(language="sh" class="code-shell").
 
   Modify the `<li>` tag by adding the built-in directive `*ngFor`.
 
-+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
++makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
 
 
 .l-sub-section
@@ -116,7 +116,7 @@ code-example(language="sh" class="code-shell").
   that uses the `hero` template variable to display the hero's properties.
 
 
-+makeExample('toh-2/ts/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
++makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
 
 :marked
   When the browser refreshes, a list of heroes appears.
@@ -140,7 +140,7 @@ code-example(language="sh" class="code-shell").
   The template for displaying heroes should look like this:
 
 
-+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')(format='.')
++makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')(format='.')
 
 .l-main-section
   :marked
@@ -158,7 +158,7 @@ code-example(language="sh" class="code-shell").
     Add a click event binding to the `<li>` like this:
 
 
-  +makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')
+  +makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')
 
   :marked
     The parentheses identify the `<li>` element's  `click` event as the target.
@@ -183,15 +183,15 @@ code-example(language="sh" class="code-shell").
     The hero names should all be unselected before the user picks a hero, so
     you won't initialize the `selectedHero` as you did with `hero`.
 
-    Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
+    Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
   +makeExample('toh-2/ts/src/app/app.component.ts', 'on-select', 'src/app/app.component.ts (onSelect)')(format='.')
 
   :marked
     The template still refers to the old `hero` property.
     Bind to the new selectedHero property instead as follows:
 
 
-  +makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
+  +makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
 
   :marked
     ### Hide the empty detail with ngIf
@@ -210,7 +210,7 @@ code-example(language="sh" class="code-shell").
     Wrap the HTML hero detail content of the template with a `<div>`.
     Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
 
-  +makeExample('toh-2/ts/app/app.component.1.html', 'ng-if', 'src/app/app.component.ts (ngIf)')(format='.')
+  +makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-if', 'src/app/app.component.ts (ngIf)')(format='.')
 
   .alert.is-critical
     :marked
@@ -248,7 +248,7 @@ code-example(language="sh" class="code-shell").
     img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
   :marked
     In the template, add the following `[class.selected]` binding to  the `<li>`:
-  +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
+  +makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
   :marked
     When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
     When the expression is `false`, Angular removes the `selected` class.
@@ -260,7 +260,7 @@ code-example(language="sh" class="code-shell").
 
   :marked
     The final version of the `<li>` looks like this:
-  +makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
+  +makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
 
   :marked
     After clicking "Magneta", the list should look like this: