diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index c26b410d76..25cbb7e1e8 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -84,7 +84,7 @@ code-example(language="sh" class="code-shell"). ### List heroes with ngFor - The goal is to bind the array of `heroes` in the component to the template, iterate over them, + The goal is to bind the array of heroes in the component to the template, iterate over them, and display them individually. Modify the `
  • ` tag by adding the built-in directive `*ngFor`. @@ -154,7 +154,7 @@ code-example(language="sh" class="code-shell"). Next you'll connect the master to the detail through a `selectedHero` component property, which is bound to a click event. - ### Add a click event + ### Handle click events Add a click event binding to the `
  • ` like this: @@ -188,7 +188,7 @@ code-example(language="sh" class="code-shell"). :marked The template still refers to the old `hero` property. - Bind to the new selectedHero property instead as follows: + Bind to the new `selectedHero` property instead as follows: +makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.') @@ -196,7 +196,8 @@ code-example(language="sh" class="code-shell"). :marked ### Hide the empty detail with ngIf - When the app loads, the `selectedHero` is undefined and won't be defined until you click a hero's name. + When the app loads, `selectedHero` is undefined. + The selected hero is initialized when the user clicks a hero's name. Angular can't display properties of the undefined `selectedHero` and throws the following error, visible in the browser's console: @@ -220,7 +221,7 @@ code-example(language="sh" class="code-shell"). The app no longer fails and the list of names displays again in the browser. :marked - When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM. + When there is no selected hero, the `ngIf` directive removes the hero detail HTML from the DOM. There are no hero detail elements or bindings to worry about. When the user picks a hero, `selectedHero` becomes defined and @@ -287,5 +288,5 @@ code-example(language="sh" class="code-shell"). ## The road ahead You've expanded the Tour of Heroes app, but it's far from complete. - You can't put the entire app into a single component. - In the [next page](toh-pt3.html), you'll split the app into sub-components and make them work together. + An app shouldn't be one monolithic component. + In the [next page](toh-pt3.html), you'll split the app into subcomponents and make them work together.