docs(toh-2): copyedits (#3504)

This commit is contained in:
Patrice Chalin 2017-04-11 22:24:48 -04:00 committed by Ward Bell
parent 71c862d51a
commit 7784faa180
1 changed files with 8 additions and 7 deletions

View File

@ -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 `<li>` 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 `<li>` 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.