05/07/2023, 16:00 Angular - Display a selection list

Skip to main content

mode_edit
Display a selection list
This tutorial shows you how to:

Expand the Tour of Heroes application to display a list of heroes.

Allow users to select a hero and display the hero's details.

For the sample application that this page describes, see the live
example / download example.

Create mock heroes

The first step is to create some heroes to display.

Create a file called mock-heroes.ts in the src/app/ directory. Define a

HEROES constant as an array of ten heroes and export it. The file should
look like this.

https://angular.io/tutorial/tour-of-heroes/toh-pt2 1/10
05/07/2023, 16:00 Angular - Display a selection list

src/app/mock-heroes.ts
Skip to main content

import { Hero } from './hero';

export const HEROES: Hero[] = [

{ id: 12, name: 'Dr. Nice' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr. IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

Displaying heroes
Open the HeroesComponent class file and import the mock HEROES .

src/app/heroes/heroes.component.ts (import HEROES)

import { HEROES } from '../mock-heroes';

In HeroesComponent class, define a component property called heroes

to expose the HEROES array for binding.

src/app/heroes/heroes.component.ts

export class HeroesComponent {

heroes = HEROES;
}

https://angular.io/tutorial/tour-of-heroes/toh-pt2 2/10
05/07/2023, 16:00 Angular - Display a selection list

List heroes with *ngFor

Skip to main content
Open the HeroesComponent template file and make the following
changes:

1. Add an <h2> at the top.

2. Below the <h2> , add a <ul> element.

3. In the <ul> element, insert an <li> .

4. Place a <button> inside the <li> that displays properties of a

hero inside <span> elements.

5. Add CSS classes to style the component.

to look like this:

heroes.component.html (heroes template)

<h2>My Heroes</h2>
<ul class="heroes">
<li>
<button type="button">
<span class="badge">{{hero.id}}</span>
<span class="name">{{hero.name}}</span>
</button>
</li>
</ul>

That displays an error since the hero property doesn't exist. To have
access to each individual hero and list them all, add an *ngFor to the

<li> to iterate through the list of heroes:

<li *ngFor="let hero of heroes">

The *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:

https://angular.io/tutorial/tour-of-heroes/toh-pt2 3/10
05/07/2023, 16:00 Angular - Display a selection list

SYNTAX DETAILS
Skip to main content

<li> 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 to put the asterisk * in front of ngFor . It's a

critical part of the syntax.

After the browser refreshes, the list of heroes appears.

INTERACTIVE ELEMENTS

Inside the <li> element, add a <button> element to wrap the hero's

details, and then make the hero clickable. To improve accessibility, use HTML

elements that are inherently interactive instead of adding an event listener to

a non-interactive element. In this case, the interactive <button> element is

used instead of adding an event to the <li> element.

For more details on accessibility, see Accessibility in Angular.

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, you set the basic styles for the entire application in
styles.css . That style sheet didn't include styles for this list of heroes.

https://angular.io/tutorial/tour-of-heroes/toh-pt2 4/10
05/07/2023, 16:00 Angular - Display a selection list

You could add more styles to styles.css and keep growing that style
Skip to main content
sheet as you add components.

You may prefer instead to define private styles for a specific component.
This keeps everything a component needs, such as 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 style sheet files identified in the @Component.styleUrls array.

When the ng generate created the HeroesComponent , it created an

empty heroes.component.css style sheet for the HeroesComponent

and pointed to it in @Component.styleUrls like this.

src/app/heroes/heroes.component.ts (@Component)

@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})

Open the heroes.component.css file and paste in the private CSS styles
for the HeroesComponent from the final code review.

Styles and style sheets 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.

https://angular.io/tutorial/tour-of-heroes/toh-pt2 5/10
05/07/2023, 16:00 Angular - Display a selection list

Skip to main content

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.

The code in this section listens for the hero item click event and
display/update the hero details.

Add a click event binding

Add a click event binding to the <button> in the <li> like this:

heroes.component.html (template excerpt)

<li *ngFor="let hero of heroes">

<button type="button" (click)="onSelect(hero)">
<!-- ... -->

This is an example of Angular's event binding syntax.

The parentheses around click tell Angular to listen for the <button>

element's click event. When the user clicks in the <button> , Angular
executes the onSelect(hero) expression.

In the next section, define an onSelect() method in HeroesComponent

to display the hero that was defined in the *ngFor expression.

Add the click event handler

Rename the component's hero property to selectedHero but don't
assign any value to it since there is no selected hero when the application

starts.

Add the following onSelect() method, which assigns the clicked hero
from the template to the component's selectedHero .

https://angular.io/tutorial/tour-of-heroes/toh-pt2 6/10
05/07/2023, 16:00 Angular - Display a selection list

src/app/heroes/heroes.component.ts (onSelect)
Skip to main content

selectedHero?: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}

Add a details section

Currently, you have a list in the component template. To show details
about a hero when you click their name in the list, add a section in the
template that displays their details. Add the following to
heroes.component.html beneath the list section:

heroes.component.html (selected hero details)

<div *ngIf="selectedHero">
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div>id: {{selectedHero.id}}</div>
<div>
<label for="hero-name">Hero name: </label>
<input id="hero-name"
[(ngModel)]="selectedHero.name" placeholder="name">
</div>
</div>

The hero details should only be displayed when a hero is selected. When a
component is created initially, there is no selected hero. Add the *ngIf

directive to the <div> that wraps the hero details. This directive tells
Angular to render the section only when the selectedHero is defined
after it has been selected by clicking on a hero.

Don't forget the asterisk * character in front of ngIf . It's a

critical part of the syntax.

https://angular.io/tutorial/tour-of-heroes/toh-pt2 7/10
05/07/2023, 16:00 Angular - Display a selection list

Style the selected hero

Skip to main content
To help identify the selected hero, you can use the .selected CSS class
in the styles you added earlier. To apply the .selected class to the
<li> when the user clicks it, use class binding.

Angular's class binding can add and remove a CSS class conditionally.

Add [class.some-css-class]="some-condition" to the element you

want to style.

Add the following [class.selected] binding to the <button> in the

HeroesComponent template:

heroes.component.html (toggle the 'selected' CSS class)

[class.selected]="hero === selectedHero"

When the current row hero is the same as the selectedHero , Angular

adds the selected CSS class. When the two heroes are different,
Angular removes the class.

The finished <li> looks like this:

https://angular.io/tutorial/tour-of-heroes/toh-pt2 8/10
05/07/2023, 16:00 Angular - Display a selection list

heroes.component.html (list item hero)

Skip to main content

<li *ngFor="let hero of heroes">

<button [class.selected]="hero === selectedHero"
type="button" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span>
<span class="name">{{hero.name}}</span>
</button>
</li>

Final code review

Here are the code files discussed on this page, including the
HeroesComponent styles.

src/app/mock-heroes.ts src/app/heroes/heroes.component.ts

import { Hero } from './hero';

export const HEROES: Hero[] = [

{ id: 12, name: 'Dr. Nice' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr. IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

https://angular.io/tutorial/tour-of-heroes/toh-pt2 9/10
05/07/2023, 16:00 Angular - Display a selection list

Summary
The Tour of Heroes application displays a list of heroes with a detail
view.
The user can select a hero and see that hero's details.
You used *ngFor to display a list.

You used *ngIf to conditionally include or exclude a block of

HTML.
You can toggle a CSS style class with a class binding.

Last reviewed on Mon May 23 2022

https://angular.io/tutorial/tour-of-heroes/toh-pt2 10/10