5 lines
16 KiB
JSON
5 lines
16 KiB
JSON
|
{
|
||
|
|
"id": "tutorial/toh-pt3",
|
||
|
|
"title": "Create a feature component",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt3.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=\"create-a-feature-component\">Create a feature component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt3#create-a-feature-component\"><i class=\"material-icons\">link</i></a></h1>\n<p>At the moment, the <code>HeroesComponent</code> displays both the list of heroes and the selected hero's details.</p>\n<p>Keeping all features in one component as the application grows will not be maintainable.\nYou'll want to split up large components into smaller sub-components, each focused on a specific task or workflow.</p>\n<p>In this page, you'll take the first step in that direction by moving the hero details into a separate, reusable <code>HeroDetailComponent</code>.</p>\n<p>The <code>HeroesComponent</code> will only present the list of heroes.\nThe <code>HeroDetailComponent</code> will present details of a selected hero.</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=\"make-the-herodetailcomponent\">Make the <code>HeroDetailComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt3#make-the-herodetailcomponent\"><i class=\"material-icons\">link</i></a></h2>\n<p>Use the Angular CLI to generate a new component named <code>hero-detail</code>.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate component hero-detail\n</code-example>\n<p>The command scaffolds the following:</p>\n<ul>\n<li>Creates a directory <code>src/app/hero-detail</code>.</li>\n</ul>\n<p>Inside that directory four files are generated:</p>\n<ul>\n<li>A CSS file for the component styles.</li>\n<li>An HTML file for the component template.</li>\n<li>A TypeScript file with a component class named <code>HeroDetailComponent</code>.</li>\n<li>A test file for the <code>HeroDetailComponent</code> class.</li>\n</ul>\n<p>The command also adds the <code>HeroDetailComponent</code> as a declaration in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator of the <code>src/app/app.module.ts</code> file.</p>\n<h3 id=\"write-the-template\">Write the template<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt3#write-the-template\"><i class=\"material-icons\">link</i></a></h3>\n<p>Cut the HTML for the hero detail from the bottom of the <code>HeroesComponent</code> template and paste it over the generated boilerplate in the <code>HeroDetailComponent</code> template.</p>\n<p>The pasted HTML refers to a <code>selectedHero</code>.\nThe new <code>HeroDetailComponent</code> can present <em>any</em> hero, not just a selected hero.\nSo replace \"selectedHero\" with \"hero\" everywhere in the template.</p>\n<p>When you're done, the <code>HeroDetailComponent</code> template should look like this:</p>\n<code-example path=\"toh-pt3/src/app/hero-detail/hero-detail.component.html\" header=\"src/app/hero-detail/hero-detail.component.html\">\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"hero\">\n\n <h2>{{hero.name | <a href=\"api/common/UpperCasePipe\" class=\"code-anchor\">uppercase</a>}} Details</h2>\n <div><span>id: </span>{{hero.id}}</div>\n <div>\n <label for=\"hero-name\">Hero name: </label>\n <input id=\"hero-name\" [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"hero.name\" placeholder=\"name\">\n </div>\n\n</div>\n\n\n</code-example>\n<h3 id=\"add-the-input-hero-property\">Add the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> hero property<a title=\"Link to this h
|
||
|
|
}
|