5 lines
22 KiB
JSON
5 lines
22 KiB
JSON
|
{
|
||
|
|
"id": "tutorial/toh-pt2",
|
||
|
|
"title": "Display a selection list",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt2.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"display-a-selection-list\">Display a selection list<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt2#display-a-selection-list\"><i class=\"material-icons\">link</i></a></h1>\n<p>In 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.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample application that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"create-mock-heroes\">Create mock heroes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt2#create-mock-heroes\"><i class=\"material-icons\">link</i></a></h2>\n<p>You'll need some heroes to display.</p>\n<p>Eventually you'll get them from a remote data server.\nFor now, you'll create some <em>mock heroes</em> and pretend they came from the server.</p>\n<p>Create a file called <code>mock-heroes.ts</code> in the <code>src/app/</code> folder.\nDefine a <code>HEROES</code> constant as an array of ten heroes and export it.\nThe file should look like this.</p>\n<code-example path=\"toh-pt2/src/app/mock-heroes.ts\" header=\"src/app/mock-heroes.ts\">\nimport { Hero } from './hero';\n\nexport const HEROES: Hero[] = [\n { id: 11, name: 'Dr Nice' },\n { id: 12, name: 'Narco' },\n { id: 13, name: 'Bombasto' },\n { id: 14, name: 'Celeritas' },\n { id: 15, name: 'Magneta' },\n { id: 16, name: 'RubberMan' },\n { id: 17, name: 'Dynama' },\n { id: 18, name: 'Dr IQ' },\n { id: 19, name: 'Magma' },\n { id: 20, name: 'Tornado' }\n];\n\n\n</code-example>\n<h2 id=\"displaying-heroes\">Displaying heroes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt2#displaying-heroes\"><i class=\"material-icons\">link</i></a></h2>\n<p>Open the <code>HeroesComponent</code> class file and import the mock <code>HEROES</code>.</p>\n<code-example path=\"toh-pt2/src/app/heroes/heroes.component.ts\" region=\"import-heroes\" header=\"src/app/heroes/heroes.component.ts (import HEROES)\">\nimport { HEROES } from '../mock-heroes';\n\n</code-example>\n<p>In the same file (<code>HeroesComponent</code> class), define a component property called <code>heroes</code> to expose the <code>HEROES</code> array for binding.</p>\n<code-example path=\"toh-pt2/src/app/heroes/heroes.component.ts\" header=\"src/app/heroes/heroes.component.ts\" region=\"component\">\nexport class HeroesComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n\n heroes = HEROES;\n}\n\n</code-example>\n<h3 id=\"list-heroes-with-ngfor\">List heroes with <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt2#list-heroes-with-ngfor\"><i class=\"material-icons\">link</i></a></h3>\n<p>Open the <code>HeroesComponent</code> template file and make the following changes:</p>\n<ul>\n<li>Add an <code><h2></code> at the top,</li>\n<li>Below it add an HTML unordered list (<code><ul></code>)</li>\n<li>Insert an <code><li></code> within the <code><ul></code> that displays properties of a <code>hero</code>.</li>\n<li>Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).</li>\n</ul>\n<p>Make it look like this:</p>\n<code-example path=\"toh-pt2/src/app/heroes/heroes.component.1.html\" region=\"list\" header=\"heroes.component.html (heroes template)\">\n<h2>My Heroes</h2>\n<ul class=\"heroes\">\n <li>\n <span class=\"badge\">{{hero.id}}</span> {{hero.name}}\n </li>\n</ul>\n\n</code-examp
|
||
|
|
}
|