2020-01-13 18:37:43 +00:00
# Create a feature component
2017-02-22 18:09:39 +00:00
2018-06-12 02:12:17 +00:00
At the moment, the `HeroesComponent` displays both the list of heroes and the selected hero's details.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
Keeping all features in one component as the application grows won't be maintainable.
2022-08-30 14:34:53 +00:00
This tutorial splits up large components into smaller subcomponents, each focused on a specific task or workflow.
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
The first step is to move the hero details into a separate, reusable `HeroDetailComponent` and end up with:
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
* A `HeroesComponent` that presents the list of heroes.
* A `HeroDetailComponent` that presents the details of a selected hero.
2017-02-22 18:09:39 +00:00
2020-04-10 17:10:59 +00:00
< div class = "alert is-helpful" >
2021-01-26 18:15:13 +00:00
For the sample application that this page describes, see the < live-example > < / live-example > .
2020-04-10 17:10:59 +00:00
< / div >
2017-11-09 19:35:12 +00:00
## Make the `HeroDetailComponent`
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
Use this `ng generate` command to create a new component named `hero-detail` .
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example format = "shell" language = "shell" >
ng generate component hero-detail
2017-02-22 18:09:39 +00:00
< / code-example >
2018-06-12 02:12:17 +00:00
The command scaffolds the following:
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* Creates a directory `src/app/hero-detail` .
2018-06-12 02:12:17 +00:00
2022-06-08 19:26:25 +00:00
Inside that directory, four files are created:
2018-06-12 02:12:17 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* A CSS file for the component styles.
* An HTML file for the component template.
* A TypeScript file with a component class named `HeroDetailComponent` .
* A test file for the `HeroDetailComponent` class.
2018-06-12 02:12:17 +00:00
The command also adds the `HeroDetailComponent` as a declaration in the `@NgModule` decorator of the `src/app/app.module.ts` file.
2017-11-06 18:02:18 +00:00
### Write the template
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
Cut the HTML for the hero detail from the bottom of the `HeroesComponent` template and paste it over the boilerplate content in the `HeroDetailComponent` template.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
The pasted HTML refers to a `selectedHero` .
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
The new `HeroDetailComponent` can present *any* hero, not just a selected hero.
2022-06-08 19:26:25 +00:00
Replace `selectedHero` with `hero` everywhere in the template.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
When you're done, the `HeroDetailComponent` template should look like this:
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example header = "src/app/hero-detail/hero-detail.component.html" path = "toh-pt3/src/app/hero-detail/hero-detail.component.html" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-09 19:35:12 +00:00
### Add the `@Input()` hero property
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
The `HeroDetailComponent` template binds to the component's `hero` property
which is of type `Hero` .
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
Open the `HeroDetailComponent` class file and import the `Hero` symbol.
2017-02-22 18:09:39 +00:00
2018-06-12 02:12:17 +00:00
< code-example path = "toh-pt3/src/app/hero-detail/hero-detail.component.ts"
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
region="import-hero" header="src/app/hero-detail/hero-detail.component.ts (import Hero)">< / code-example >
2017-02-22 18:09:39 +00:00
2018-06-12 02:12:17 +00:00
The `hero` property
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
[must be an `Input` property ](guide/inputs-outputs "Input and Output properties" ),
2017-11-06 18:02:18 +00:00
annotated with the `@Input()` decorator,
2022-06-08 19:26:25 +00:00
because the *external* `HeroesComponent` [binds to it ](#heroes-component-template ) like this.
2017-03-31 23:57:13 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example path = "toh-pt3/src/app/heroes/heroes.component.html" region = "hero-detail-binding" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
Amend the `@angular/core` import statement to include the `Input` symbol.
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example header = "src/app/hero-detail/hero-detail.component.ts (import Input)" path = "toh-pt3/src/app/hero-detail/hero-detail.component.ts" region = "import-input" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
Add a `hero` property, preceded by the `@Input()` decorator.
2017-03-31 23:57:13 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example header = "src/app/hero-detail/hero-detail.component.ts" path = "toh-pt3/src/app/hero-detail/hero-detail.component.ts" region = "input-hero" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
That's the only change you should make to the `HeroDetailComponent` class.
2018-06-12 02:12:17 +00:00
There are no more properties. There's no presentation logic.
2021-01-26 18:15:13 +00:00
This component only receives a hero object through its `hero` property and displays it.
2017-03-31 23:57:13 +00:00
2017-11-09 19:35:12 +00:00
## Show the `HeroDetailComponent`
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
The `HeroesComponent` used to display the hero details on its own, before you removed that part of the template.
2021-01-26 18:15:13 +00:00
This section guides you through delegating logic to the `HeroDetailComponent` .
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The two components have a parent/child relationship.
The parent, `HeroesComponent` , controls the child, `HeroDetailComponent` by
sending it a new hero to display whenever the user selects a hero from the list.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
You don't need to change the `HeroesComponent` *class* , instead change its *template* .
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< a id = "heroes-component-template" > < / a >
2017-02-22 18:09:39 +00:00
2017-11-09 19:35:12 +00:00
### Update the `HeroesComponent` template
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
The `HeroDetailComponent` selector is `'app-hero-detail'` .
Add an `<app-hero-detail>` element near the bottom of the `HeroesComponent` template, where the hero detail view used to be.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
Bind the `HeroesComponent.selectedHero` to the element's `hero` property like this.
2017-03-31 23:57:13 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-example header = "heroes.component.html (HeroDetail binding)" path = "toh-pt3/src/app/heroes/heroes.component.html" region = "hero-detail-binding" > < / code-example >
2017-03-27 15:08:53 +00:00
2020-04-28 20:26:58 +00:00
`[hero]="selectedHero"` is an Angular [property binding ](guide/property-binding ).
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
It's a *one-way* data binding from
2018-02-20 21:12:13 +00:00
the `selectedHero` property of the `HeroesComponent` to the `hero` property of the target element, which maps to the `hero` property of the `HeroDetailComponent` .
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
Now when the user clicks a hero in the list, the `selectedHero` changes.
2022-06-08 19:26:25 +00:00
When the `selectedHero` changes, the *property binding* updates `hero` and
the `HeroDetailComponent` displays the new hero.
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
The revised `HeroesComponent` template should look like this:
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
< code-example path = "toh-pt3/src/app/heroes/heroes.component.html"
2019-07-20 17:40:17 +00:00
header="heroes.component.html">< / code-example >
2017-03-27 15:08:53 +00:00
2021-01-26 18:15:13 +00:00
The browser refreshes and the application starts working again as it did before.
2017-03-31 23:57:13 +00:00
2017-03-27 15:08:53 +00:00
## What changed?
2017-11-06 18:02:18 +00:00
2017-03-27 15:08:53 +00:00
As [before ](tutorial/toh-pt2 ), whenever a user clicks on a hero name,
the hero detail appears below the hero list.
2017-11-06 18:02:18 +00:00
Now the `HeroDetailComponent` is presenting those details instead of the `HeroesComponent` .
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
2017-03-27 15:08:53 +00:00
2021-01-26 18:15:13 +00:00
1. You reduced the `HeroesComponent` responsibilities.
2017-03-27 15:08:53 +00:00
1. You can evolve the `HeroDetailComponent` into a rich hero editor
2017-11-06 18:02:18 +00:00
without touching the parent `HeroesComponent` .
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
1. You can evolve the `HeroesComponent` without touching the hero detail view.
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
1. You can re-use the `HeroDetailComponent` in the template of some future component.
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
## Final code review
2017-03-27 15:08:53 +00:00
2020-04-10 17:10:59 +00:00
Here are the code files discussed on this page.
2017-03-27 15:08:53 +00:00
< code-tabs >
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-pane header = "src/app/hero-detail/hero-detail.component.ts" path = "toh-pt3/src/app/hero-detail/hero-detail.component.ts" > < / code-pane >
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-pane header = "src/app/hero-detail/hero-detail.component.html" path = "toh-pt3/src/app/hero-detail/hero-detail.component.html" > < / code-pane >
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-pane header = "src/app/heroes/heroes.component.html" path = "toh-pt3/src/app/heroes/heroes.component.html" > < / code-pane >
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
< code-pane header = "src/app/app.module.ts" path = "toh-pt3/src/app/app.module.ts" > < / code-pane >
2018-05-12 19:09:40 +00:00
2017-03-27 15:08:53 +00:00
< / code-tabs >
2017-02-22 18:09:39 +00:00
2017-09-27 20:45:47 +00:00
## Summary
2017-03-31 23:57:13 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* You created a separate, reusable `HeroDetailComponent` .
2017-03-31 23:57:13 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* You used a [property binding ](guide/property-binding ) to give the parent `HeroesComponent` control over the child `HeroDetailComponent` .
2017-02-22 18:09:39 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* You used the [`@Input` decorator ](guide/inputs-outputs )
2017-11-06 18:02:18 +00:00
to make the `hero` property available for binding
by the external `HeroesComponent` .
