docs(toh-2): copyedits (#3504)
This commit is contained in:
parent
71c862d51a
commit
7784faa180
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue