@@ -84,7 +84,7 @@ code-example(language="sh" class="code-shell").
84
84
85
85
### List heroes with ngFor
86
86
87
- The goal is to bind the array of ` heroes` in the component to the template, iterate over them,
87
+ The goal is to bind the array of heroes in the component to the template, iterate over them,
88
88
and display them individually.
89
89
90
90
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
@@ -154,7 +154,7 @@ code-example(language="sh" class="code-shell").
154
154
Next you'll connect the master to the detail through a `selectedHero` component property,
155
155
which is bound to a click event.
156
156
157
- ### Add a click event
157
+ ### Handle click events
158
158
Add a click event binding to the `<li>` like this:
159
159
160
160
@@ -188,15 +188,16 @@ code-example(language="sh" class="code-shell").
188
188
189
189
:marked
190
190
The template still refers to the old `hero` property.
191
- Bind to the new selectedHero property instead as follows:
191
+ Bind to the new ` selectedHero` property instead as follows:
192
192
193
193
194
194
+ makeExample('toh-2/ts/src/app/app.component.1.html' , 'selectedHero-details' , 'app.component.ts (template excerpt)' )( format ='.' )
195
195
196
196
:marked
197
197
### Hide the empty detail with ngIf
198
198
199
- When the app loads, the `selectedHero` is undefined and won't be defined until you click a hero's name.
199
+ When the app loads, `selectedHero` is undefined.
200
+ The selected hero is initialized when the user clicks a hero's name.
200
201
Angular can't display properties of the undefined `selectedHero` and throws the following error,
201
202
visible in the browser's console:
202
203
@@ -220,7 +221,7 @@ code-example(language="sh" class="code-shell").
220
221
The app no longer fails and the list of names displays again in the browser.
221
222
222
223
:marked
223
- When there is no `selectedHero` , the `ngIf` directive removes the hero detail HTML from the DOM.
224
+ When there is no selected hero , the `ngIf` directive removes the hero detail HTML from the DOM.
224
225
There are no hero detail elements or bindings to worry about.
225
226
226
227
When the user picks a hero, `selectedHero` becomes defined and
@@ -287,5 +288,5 @@ code-example(language="sh" class="code-shell").
287
288
288
289
## The road ahead
289
290
You've expanded the Tour of Heroes app, but it's far from complete.
290
- You can 't put the entire app into a single component.
291
- In the [next page](toh-pt3.html), you'll split the app into sub-components and make them work together.
291
+ An app shouldn 't be one monolithic component.
292
+ In the [next page](toh-pt3.html), you'll split the app into subcomponents and make them work together.
0 commit comments