` element’s `click` event as the target.
+ The expression to the right of the equal sign calls the `AppComponent` method, `onSelect()`,
+ passing the local template variable `hero` as an argument.
+ That’s the same `hero` variable we defined previously in the `ngFor`.
+ .l-sub-section
+ :marked
+ Learn more about Event Binding in the
+ [User Input](../guide/user-input.html) and
+ [Templating Syntax](../guide/template-syntax.html#event-binding) chapters.
+ :marked
+ ### Add the click handler
+ Our event binding refers to an `onSelect` method that doesn’t exist yet.
+ We’ll add that method to our component now.
+
+ What should that method do? It should set the component’s selected hero to the hero that the user clicked.
+
+ Our component doesn’t have a “selected hero” yet either. We’ll start there.
+
+ ### Expose the selected hero
+ We no longer need the static `hero` property of the `AppComponent`.
+ **Replace** it with this simple `selectedHero` property:
+
+ +makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero-1', 'app_component.dart (selectedHero)')
+
+ :marked
+ We’ve decided that none of the heroes should be selected before the user picks a hero so
+ we won’t initialize the `selectedHero` as we were doing with `hero`.
+
+ Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
+ +makeExample('toh-2/dart/lib/app_component.dart', 'on-select-1', 'app_component.dart (onSelect)')(format=".")
+
+ :marked
+ We will be showing the selected hero's details in our template.
+ At the moment, it is still referring to the old `hero` property.
+ Let’s fix the template to bind to the new `selectedHero` property.
+
+ +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')(format=".")
+ :marked
+ ### Hide the empty detail with ngIf
+
+ When our app loads we see a list of heroes, but a hero is not selected.
+ The `selectedHero` is `undefined`.
+ That’s why we'll see the following error in the browser’s console:
+
+ code-example(language="html").
+ EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
+
+ :marked
+ Remember that we are displaying `selectedHero.name` in the template.
+ This name property does not exist because `selectedHero` itself is undefined.
+
+ We'll address this problem by keeping the hero detail out of the DOM until there is a selected hero.
+
+ We wrap the HTML hero detail content of our template with a ``.
+ Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
+
+ +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'ng-if', 'app_component.dart (ngIf)')(format=".")
+
+ .alert.is-critical
+ :marked
+ Remember that the leading asterisk (`*`) in front of `ngIf` is
+ a critical part of this syntax.
+ :marked
+ When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
+ There will be no hero detail elements and no bindings to worry about.
+
+ When the user picks a hero, `selectedHero` isn't `null` anymore and
+ `ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
+ .l-sub-section
+ :marked
+ `ngIf` and `ngFor` are called “structural directives” because they can change the
+ structure of portions of the DOM.
+ In other words, they give structure to the way Angular displays content in the DOM.
+
+ Learn more about `ngIf`, `ngFor` and other structural directives in the
+ [Structural Directives](../guide/structural-directives.html) and
+ [Template Syntax](../guide/template-syntax.html#directives) chapters.
+
+ :marked
+ The browser refreshes and we see the list of heroes but not the selected hero detail.
+ The `ngIf` keeps it out of the DOM as long as the `selectedHero` is undefined.
+ When we click on a hero in the list, the selected hero displays in the hero details.
+ Everything is working as we expect.
+
+ ### Styling the selection
+
+ We see the selected hero in the details area below but we can’t quickly locate that hero in the list above.
+ We can fix that by applying the `selected` CSS class to the appropriate `
` in the master list.
+ For example, when we select Magneta from the heroes list,
+ we can make it pop out visually by giving it a subtle background color as shown here.
+
+ figure.image-display
+ img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
+ :marked
+ We’ll add a property binding on `class` for the `selected` class to the template. We'll set this to an expression that compares the current `selectedHero` to the `hero`.
+
+ The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
+ We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
+ +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (Setting the CSS class)')(format=".")
+ :marked
+ Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
+ This is the syntax for a Property Binding, a binding in which data flows one way
+ from the data source (the expression `hero == selectedHero`) to a property of `class`.
+ +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (Styling each hero)')(format=".")
+
+ .l-sub-section
+ :marked
+ Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
+ in the Template Syntax chapter.
+
+ :marked
+ The browser reloads our app.
+ We select the hero Magneta and the selection is clearly identified by the background color.
+
+ figure.image-display
+ img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
+
+ :marked
+ We select a different hero and the tell-tale color switches to that hero.
+
+ Here's the complete `app_component.dart` as it stands now:
+
+ +makeExample('toh-2/dart/lib/app_component.dart', 'pt2', 'app_component.dart')
+
+.l-main-section
+:marked
+ ## The Road We’ve Travelled
+ Here’s what we achieved in this chapter:
+
+ * Our Tour of Heroes now displays a list of selectable heroes
+ * We added the ability to select a hero and show the hero’s details
+ * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
+
+ ### The Road Ahead
+ Our Tour of Heroes has grown, but it’s far from complete.
+ We can't put the entire app into a single component.
+ We need to break it up into sub-components and teach them to work together
+ as we learn in the [next chapter](toh-pt3.html).