Display a selection listlink
\nIn this page, you'll expand the Tour of Heroes application to display a list of heroes, and\nallow users to select a hero and display the hero's details.
\n For the sample application that this page describes, see the
Create mock heroeslink
\nYou'll need some heroes to display.
\nEventually you'll get them from a remote data server.\nFor now, you'll create some mock heroes and pretend they came from the server.
\nCreate a file called mock-heroes.ts in the src/app/ folder.\nDefine a HEROES constant as an array of ten heroes and export it.\nThe file should look like this.
Displaying heroeslink
\nOpen 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 *ngForlink
\nOpen the HeroesComponent template file and make the following changes:
- \n
- Add an
<h2>at the top, \n - Below it add an HTML unordered list (
<ul>) \n - Insert an
<li>within the<ul>that displays properties of ahero. \n - Sprinkle some CSS classes for styling (you'll add the CSS styles shortly). \n
Make it look like this:
\nThat shows one hero. To list them all, add an *ngFor to the <li> to iterate through the list of heroes:
The *ngFor is Angular's repeater directive.\nIt repeats the host element for each element in a list.
The syntax in this example is as follows:
\n- \n
<li>is the host element. \nheroesholds the mock heroes list from theHeroesComponentclass, the mock heroes list. \nheroholds the current hero object for each iteration through the list. \n
Don't forget the asterisk (*) in front of ngFor. It's a critical part of the syntax.
After the browser refreshes, the list of heroes appears.
\n\nStyle the heroeslink
\nThe heroes list should be attractive and should respond visually when users\nhover over and select a hero from the list.
\nIn the first tutorial, you set the basic styles for the entire application in styles.css.\nThat 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,\nand the CSS —together in one place.
\nThis approach makes it easier to re-use the component somewhere else\nand deliver the component's intended appearance even if the global styles are different.
\nYou define private styles either inline in the @Component.styles array or\nas 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\nand pointed to it in @Component.styleUrls like this.
Open the heroes.component.css file and paste in the private CSS styles for the HeroesComponent.\nYou'll find them in the final code review at the bottom of this guide.
Styles and stylesheets identified in @Component metadata are scoped to that specific component.\nThe heroes.component.css styles apply only to the HeroesComponent and don't affect the outer HTML or the HTML in any other component.
Viewing detailslink
\nWhen the user clicks a hero in the list, the component should display the selected hero's details at the bottom of the page.
\nIn this section, you'll listen for the hero item click event\nand update the hero detail.
\nAdd a click event bindinglink
\nAdd a click event binding to the <li> like this:
This is an example of Angular's event binding syntax.
\nThe parentheses around click tell Angular to listen for the <li> element's click event.\nWhen the user clicks in the <li>, Angular executes the onSelect(hero) expression.
In the next section, define an onSelect() method in HeroesComponent to\ndisplay the hero that was defined in the *ngFor expression.
Add the click event handlerlink
\nRename the component's hero property to selectedHero but don't assign it.\nThere is no selected hero when the application starts.
Add the following onSelect() method, which assigns the clicked hero from the template\nto the component's selectedHero.
Add a details sectionlink
\nCurrently, you have a list in the component template. To click on a hero on the list\nand reveal details about that hero, you need a section for the details to render in the\ntemplate. Add the following to heroes.component.html beneath the list section:
After the browser refreshes, the application is broken.
\nOpen the browser developer tools and look in the console for an error message like this:
\nWhat happened?link
\nWhen the application starts, the selectedHero is undefined by design.
Binding expressions in the template that refer to properties of selectedHero—expressions like {{selectedHero.name}}—must fail because there is no selected hero.
The fix - hide empty details with *ngIflink
\nThe component should only display the selected hero details if the selectedHero exists.
Wrap the hero detail HTML in a <div>.\nAdd Angular's *ngIf directive to the <div> and set it to selectedHero.
Don't forget the asterisk (*) in front of ngIf. It's a critical part of the syntax.
After the browser refreshes, the list of names reappears.\nThe details area is blank.\nClick a hero in the list of heroes and its details appear.\nThe application seems to be working again.\nThe heroes appear in a list and details about the clicked hero appear at the bottom of the page.
\nWhy it workslink
\nWhen selectedHero is undefined, the ngIf removes the hero detail from the DOM. There are no selectedHero bindings to consider.
When the user picks a hero, selectedHero has a value and\nngIf puts the hero detail into the DOM.
Style the selected herolink
\nTo help identify the selected hero, you can use the .selected CSS class in the styles you added earlier.\nTo apply the .selected class to the <li> when the user clicks it, use class binding.
![\"Selected](\"generated/images/guide/toh/heroes-list-selected.png\")
\nAngular's class binding can add and remove a CSS class conditionally.\nJust add [class.some-css-class]=\"some-condition\" to the element you want to style.
Add the following [class.selected] binding to the <li> in the HeroesComponent template:
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:
Final code reviewlink
\nHere are the code files discussed on this page, including the HeroesComponent styles.