{"id":71677,"date":"2020-01-10T16:11:01","date_gmt":"2020-01-10T10:41:01","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71677"},"modified":"2024-04-12T14:22:38","modified_gmt":"2024-04-12T08:52:38","slug":"display-a-heroes-list","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/display-a-heroes-list\/","title":{"rendered":"Display a Heroes List"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

We will expand the Tour of Heroes app to display a list of heroes, and allow users to select a hero and display the hero’s details.<\/p>\n

Create mock heroes<\/strong><\/h3>\n

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.<\/p>\n

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.<\/p>\n

src\/app\/mock-heroes.ts<\/strong><\/p>\n

import { Hero } from ‘.\/hero’;<\/p>\n

export const HEROES: Hero[] = [<\/p>\n

{ id: 11, name: ‘Mr. Nice’ },<\/p>\n

{ id: 12, name: ‘Narco’ },<\/p>\n

{ id: 13, name: ‘Bombasto’ },<\/p>\n

{ id: 14, name: ‘Celeritas’ },<\/p>\n

{ id: 15, name: ‘Magneta’ },<\/p>\n

{ id: 16, name: ‘RubberMan’ },<\/p>\n

{ id: 17, name: ‘Dynama’ },<\/p>\n

{ id: 18, name: ‘Dr IQ’ },<\/p>\n

{ id: 19, name: ‘Magma’ },<\/p>\n

{ id: 20, name: ‘Tornado’ }<\/p>\n

];<\/p>\n

Displaying heroes<\/strong><\/p>\n

You’re about to display the list of heroes at the top of the HeroesComponent. Open the HeroesComponent class file and import the mock HEROES.<\/p>\n

src\/app\/heroes\/heroes.component.ts (import HEROES)<\/strong><\/p>\n

import { HEROES } from ‘..\/mock-heroes’;<\/p>\n

In the same file (HeroesComponent class), define a component property called heroes to expose HEROES array for binding.<\/p>\n

export class HeroesComponent implements OnInit {<\/p>\n

heroes = HEROES;<\/p>\n

List heroes with *ngFor<\/p>\n

Open the HeroesComponent template file and make the following changes:<\/p>\n