` 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 `ng-for`.
+ .alert.is-helpful
+ :markdown
+ Learn more about Event Binding in the [Templating Syntax](../guide/template-syntax#event-binding) chapter.
+ :markdown
+ ## 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:
+ ```
+ public selectedHero: Hero;
+ ```
+ 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.
+ ```
+ onSelect(hero: Hero) { this.selectedHero = hero; }
+ ```
+
+ 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.
+
+ code-example(format="linenums").
+ <h2>{{selectedHero.name}} details!</h2>
+ <div><label>id: </label>{{selectedHero.id}}</div>
+ <div>
+ <label>name: </label>
+ <input [(ng-model)]="selectedHero.name" placeholder="name"></input>
+ </div>
+
+ :markdown
+ ### 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:
+ ```
+ EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
+ ```
+ 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 `ng-if` built-in directive and set it to the `selectedHero` property of our component.
+
+ code-example(format="linenums").
+ <div *ng-if="selectedHero">
+ <h2>{{selectedHero.name}} details!</h2>
+ <div><label>id: </label>{{selectedHero.id}}</div>
+ <div>
+ <label>name: </label>
+ <input [(ng-model)]="selectedHero.name" placeholder="name"></input>
+ </div>
+ </div>
+ .alert.is-important
+ :markdown
+ Do not neglect the leading asterisk (`*`) in front of `ng-if`.
+ It's a critical part of the syntax in this usage of `ng-if`.
+ :markdown
+ When there is no `selectedHero`, the `ng-if` directive removes the hero detail HTML from the DOM.
+ There will no hero detail elements and no bindings to worry about.
+
+ When the user picks a hero, `selectedHero` becomes "truthy" and
+ `ng-if` puts the hero detail content into the DOM and evaluates the nested bindings.
+
+ .alert.is-helpful
+ :markdown
+ `ng-if` and `ng-for` 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 `ng-if`, `ng-for` and other structural directives in the
+ [Template Syntax](../guide/template-syntax#directives) chapter
+
+ :markdown
+ We learned previously with `NgFor` that we must declare every directive we use in the component’s `@Component` decorator.
+ Let’s do that again for `NgIf`.
+
+ Add the `NgIf` symbol to our imports at the top of our `app.ts` file, keeping them sorted
+ alphabetically to make them easier to find:
+ ```
+ import {bootstrap, Component, FORM_DIRECTIVES, NgFor, NgIf} from 'angular2/angular2';
+ ```
+ :markdown
+ Now add `NgIf` to the directives array in the `@Component` decorator:
+ ```
+ directives: [FORM_DIRECTIVES, NgFor, NgIf]
+ ```
+ The browser refreshes and we see the list of heroes but not the selected hero detail.
+ The `ng-if` 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")
+ :markdown
+ First we’ll add a `getSelectedClass` method to the component that compares the current `selectedHero` to a hero parameter
+ and returns an object with a single key/value pair.
+
+ 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*”.
+ Here is that method.
+ ```
+ getSelectedClass(hero: Hero) {
+ return { 'selected': hero === this.selectedHero };
+ }
+ ```
+ What do we do with this method and its peculiar result?
+
+ ### NgClass
+ We’ll add the `ng-class`built-in directive to the `` element in our template and bind it to `getSelectedClass`.
+ It’s no coincidence that the value returned by `getSelectedClass` is exactly what the `ng-class` requires
+ to add or remove the `selected` class to each hero’s display.
+ code-example(format="linenums").
+ <li *ng-for="#hero of heroes"
+ [ng-class]="getSelectedClass(hero)"
+ (click)="onSelect(hero)">
+ <span class="badge">{{hero.id}}</span> {{hero.name}}</a>
+ </li>
+
+ .alert.is-helpful
+ :markdown
+ Learn more about `ng-class` in the
+ [Template Syntax](../guide/template-syntax#ng-class) chapter
+
+ :markdown
+ Notice in the template that the `ng-class` name is surrounded in square brackets (`[]`).
+ This is the syntax for a Property Binding, a binding in which data flow one way
+ from the data source (the `getSelectedClass`) to a property of the `ng-class` directive.
+
+ .alert.is-helpful
+ :markdown
+ Learn more about about one-way property data binding in the
+ [Template Syntax](../guide/template-syntax#property-binding) chapter
+ :markdown
+ We've added yet another new directive to our template that we have to import and declare
+ in the component’s `directives` array as we’ve done twice before.
+ ```
+ import {bootstrap, Component,
+ FORM_DIRECTIVES, NgClass, NgFor, NgIf} from 'angular2/angular2';
+ ```
+
+ ```
+ directives: [FORM_DIRECTIVES, NgClass, NgFor, NgIf]
+ ```
+ The browser reloads our app.
+ We select a hero 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")
+
+ :markdown
+ We select a different hero and the tell-tale color switches to that hero.
+
+ ## Declaring Built-In Directives
+
+ Every time we used a directive, we imported it and declared it in the component.
+ We only used three directives but we can easily envision a component that uses many more.
+ The `directives` array grows quickly and the process of importing the directive and adding it to the array is tedious.
+ We can make this easier.
+
+ Remember how we imported the `FORM_DIRECTIVES` array to help us apply `ng-model`to our template in the previous chapter?
+ The `FORM_DIRECTIVES` array held all the directives we needed for `ng-model` (and a few more).
+ We didn’t have to list them. We simply added the `FORM_DIRECTIVES` array to the component’s `directives` array.
+
+ The `NgClass`, `NgFor`, and `NgIf` are extremely common directives used by many components in many applications.
+ Fortunately they are all exported from Angular as part of the `CORE_DIRECTIVES` array.
+
+ Let’s replace all of those separate import variables with `CORE_DIRECTIVES`:
+ ```
+ import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
+ ```
+ Then replace `NgClass`, `NgFor`, and `NgIf` in the `directives` array with `CORE_DIRECTIVES`:
+ ```
+ directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
+ ```
+ Everything still works and we have a convenient way to import and declare the most commonly used directives.
+ Cleaner code for the win!
+
+.l-main-section
+ :markdown
+ # 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 `ng-if`, `ng-for` and `ng-class` in a component’s template
+
+ ## The Road Ahead
+ Our Tour of Heroes has grown, but it’s far from complete.
+ We want to get data from an asynchronous source using promises, use shared services, and create reusable components.
+ We’ll learn more about these tasks in the coming tutorial chapters.
\ No newline at end of file
diff --git a/public/resources/images/devguide/toh/heroes-list-2.png b/public/resources/images/devguide/toh/heroes-list-2.png
new file mode 100644
index 0000000000..edb637766a
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-2.png differ
diff --git a/public/resources/images/devguide/toh/heroes-list-selected.png b/public/resources/images/devguide/toh/heroes-list-selected.png
new file mode 100644
index 0000000000..e5303b1d05
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-selected.png differ