# Display a selection list
In this page, you'll expand the Tour of Heroes application to display a list of heroes, and allow users to select a hero and display the hero's details.
For the sample application that this page describes, see the .
## Create mock heroes
You'll need some heroes to display.
Eventually you'll get them from a remote data server.
For now, you'll create some *mock heroes* and pretend they came from the server.
Create a file called `mock-heroes.ts` in the `src/app/` folder.
Define a `HEROES` constant as an array of ten heroes and export it.
The file should look like this.
## Displaying heroes
Open the `HeroesComponent` class file and import the mock `HEROES`.
In the same file \(`HeroesComponent` class\), define a component property called `heroes` to expose the `HEROES` array for binding.
### List heroes with `*ngFor`
Open the `HeroesComponent` template file and make the following changes:
1. Add an `
` at the top.
1. Below it add an HTML unordered list \(`
`\) element.
1. Insert an `
` within the `
` that displays properties of a `hero`.
1. Sprinkle some CSS classes for styling \(you'll add the CSS styles shortly\).
Make it look like this:
That displays an error since the property 'hero' does not exist.
To have access to each individual hero and list them all, add an `*ngFor` to the `
` to iterate through the list of heroes:
The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's *repeater* directive.
It repeats the host element for each element in a list.
The syntax in this example is as follows:
| Syntax | Details |
|:--- |:--- |
| `
` | The host element. |
| `heroes` | Holds the mock heroes list from the `HeroesComponent` class, the mock heroes list. |
| `hero` | Holds the current hero object for each iteration through the list. |
Don't forget the asterisk \(`*`\) character in front of `ngFor`.
It's a critical part of the syntax.
After the browser refreshes, the list of heroes appears.
### Style the heroes
The heroes list should be attractive and should respond visually when users
hover over and select a hero from the list.
In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
That stylesheet didn't include styles for this list of heroes.
You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
You may prefer instead to define private styles for a specific component and keep everything a component needs —the code, the HTML, and the CSS— together in one place.
This approach makes it easier to re-use the component somewhere else and deliver the component's intended appearance even if the global styles are different.
You define private styles either inline in the `@Component.styles` array or as stylesheet file(s) identified in the `@Component.styleUrls` array.
When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent` and pointed to it in `@Component.styleUrls` like this.
Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
## Viewing details
When the user clicks a hero in the list, the component should display the selected hero's details at the bottom of the page.
In this section, you'll listen for the hero item click event and update the hero detail.
### Add a click event binding
Start creating a `