2021-01-29 20:24:30 +00:00
# Add navigation with routing
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
The Tour of Heroes application has new requirements:
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
* Add a *Dashboard* view
* Add the ability to navigate between the *Heroes* and *Dashboard* views
* When users click a hero name in either view, navigate to a detail view of the selected hero
* When users click a *deep link* in an email, open the detail view for a particular hero
2017-02-22 18:09:39 +00:00
2020-04-10 17:10:59 +00:00
< div class = "alert is-helpful" >
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
For the sample application that this page describes, see the < live-example > < / live-example > .
2020-04-10 17:10:59 +00:00
< / div >
2022-06-08 19:26:25 +00:00
When you're done, users can navigate the application like this:
2017-02-22 18:09:39 +00:00
2019-11-11 22:47:51 +00:00
< div class = "lightbox" >
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
< img alt = "View navigations" src = "generated/images/guide/toh/nav-diagram.png" >
2019-11-11 22:47:51 +00:00
< / div >
2017-03-27 15:08:53 +00:00
2018-02-22 16:08:07 +00:00
## Add the `AppRoutingModule`
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
In Angular, the best practice is to load and configure the router in a separate, top-level module.
The router is dedicated to routing and imported by the root `AppModule` .
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
By convention, the module class name is `AppRoutingModule` and it belongs in the `app-routing.module.ts` in the `src/app` directory.
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
Run `ng generate` to create the application routing module.
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 format = "shell" language = "shell" >
ng generate module app-routing --flat --module=app
2017-03-31 23:57:13 +00:00
< / code-example >
2018-07-19 22:00:08 +00:00
< div class = "alert is-helpful" >
2017-03-27 15:08:53 +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
| Parameter | Details |
|:--- |:--- |
2022-06-08 19:26:25 +00:00
| `--flat` | Puts the file in `src/app` instead of its own directory. |
| `--module=app` | Tells `ng generate` to register it in the `imports` array of the `AppModule` . |
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
2017-04-10 15:51:13 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The file that `ng generate` creates looks 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/app-routing.module.ts (generated)" path = "toh-pt5/src/app/app-routing.module.0.ts" > < / code-example >
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
Replace it with the following:
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/app-routing.module.ts (updated)" path = "toh-pt5/src/app/app-routing.module.1.ts" > < / code-example >
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the application can have routing capability.
The next import, `HeroesComponent` , gives the Router somewhere to go once you configure the routes.
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
Notice that the `CommonModule` references and `declarations` array are unnecessary, so are no longer part of `AppRoutingModule` .
The following sections explain the rest of the `AppRoutingModule` in more detail.
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
### Routes
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
The next part of the file is where you configure your routes.
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
*Routes* tell the Router which view to display when a user clicks a link or pastes a URL into the browser address bar.
2017-03-27 15:08:53 +00:00
2020-12-08 10:45:56 +00:00
Since `app-routing.module.ts` already imports `HeroesComponent` , you can use it in the `routes` array:
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/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" region = "heroes-route" > < / code-example >
2017-03-31 23:57:13 +00:00
2019-01-31 19:25:30 +00:00
A typical Angular `Route` has two properties:
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
| Properties | Details |
|:--- |:--- |
| `path` | A string that matches the URL in the browser address bar. |
| `component` | The component that the router should create when navigating to this route. |
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
This tells the router to match that URL to `path: 'heroes'` and display the `HeroesComponent` when the URL is something like `localhost:4200/heroes` .
2017-02-22 18:09:39 +00:00
2019-01-31 19:25:30 +00:00
### `RouterModule.forRoot()`
2017-02-22 18:09:39 +00:00
2019-01-31 19:25:30 +00:00
The `@NgModule` metadata initializes the router and starts it listening for browser location changes.
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
The following line adds the `RouterModule` to the `AppRoutingModule` `imports` array and configures it with the `routes` in one step by calling `RouterModule.forRoot()` :
2019-01-31 19:25:30 +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/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" region = "ngmodule-imports" > < / code-example >
2017-02-22 18:09:39 +00:00
2018-07-19 22:00:08 +00:00
< div class = "alert is-helpful" >
2017-03-27 15:08:53 +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
The method is called `forRoot()` because you configure the router at the application's root level.
The `forRoot()` method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL.
2017-03-31 11:23:16 +00:00
2017-04-10 15:51:13 +00:00
< / div >
2017-03-31 11:23:16 +00:00
2022-06-08 19:26:25 +00:00
Next, `AppRoutingModule` exports `RouterModule` to be available throughout the application.
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/app-routing.module.ts (exports array)" path = "toh-pt5/src/app/app-routing.module.ts" region = "export-routermodule" > < / code-example >
2017-03-31 11:23:16 +00:00
2019-01-31 19:25:30 +00:00
## Add `RouterOutlet`
2022-10-07 16:59:51 +00:00
<!-- markdownlint - disable MD001 -->
2019-01-31 19:25:30 +00:00
Open the `AppComponent` template and replace the `<app-heroes>` element with a `<router-outlet>` element.
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/app.component.html (router-outlet)" path = "toh-pt5/src/app/app.component.html" region = "outlet" > < / code-example >
2019-01-31 19:25:30 +00:00
2022-06-08 19:26:25 +00:00
The `AppComponent` template no longer needs `<app-heroes>` because the application only displays the `HeroesComponent` when the user navigates to it.
2017-03-31 11:23:16 +00:00
2017-11-06 18:02:18 +00:00
The `<router-outlet>` tells the router where to display routed views.
2017-03-31 11:23:16 +00:00
2018-07-19 22:00:08 +00:00
< div class = "alert is-helpful" >
2017-03-31 11:23:16 +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
The `RouterOutlet` is one of the router directives that became available to the `AppComponent` because `AppModule` imports `AppRoutingModule` which exported `RouterModule` .
The `ng generate` command you ran at the start of this tutorial added this import because of the `--module=app` flag.
2022-06-08 19:26:25 +00:00
If you didn't use the `ng generate` command to create `app-routing.module.ts` , import `AppRoutingModule` into `app.module.ts` and add it to the `imports` array of the `NgModule` .
2017-03-27 15:08:53 +00:00
2017-04-10 15:51:13 +00:00
< / div >
2017-03-27 15:08:53 +00:00
2022-10-07 16:59:51 +00:00
<!-- markdownlint - disable MD024 -->
2017-11-06 18:02:18 +00:00
#### Try it
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
If you're not still serving your application, run `ng serve` to see your application in the browser.
2017-03-27 15:08:53 +00:00
2021-01-29 20:24:30 +00:00
The browser should refresh and display the application title but not the list of heroes.
2017-03-31 23:57:13 +00:00
2019-01-31 19:25:30 +00:00
Look at the browser's address bar.
2017-11-06 18:02:18 +00:00
The URL ends in `/` .
The route path to `HeroesComponent` is `/heroes` .
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
Append `/heroes` to the URL in the browser address bar.
2022-10-07 16:59:51 +00:00
You should see the familiar heroes overview/detail view.
2017-03-31 23:57:13 +00:00
2021-05-24 16:37:12 +00:00
Remove `/heroes` from the URL in the browser address bar.
The browser should refresh and display the application title but not the list of heroes.
2022-10-07 16:59:51 +00:00
<!-- markdownlint - enable MD001 -->
<!-- markdownlint - enable MD024 -->
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 = "routerlink" > < / a >
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
## Add a navigation link using `routerLink`
2017-03-27 15:08:53 +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
Ideally, users should be able to click a link to navigate rather than pasting a route URL into the address bar.
2017-03-27 15:08:53 +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
Add a `<nav>` element and, within that, an anchor element that, when clicked, triggers navigation to the `HeroesComponent` .
2017-11-06 18:02:18 +00:00
The revised `AppComponent` template looks like this:
2017-03-27 15:08:53 +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/app.component.html (heroes RouterLink)" path = "toh-pt5/src/app/app.component.html" region = "heroes" > < / code-example >
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
A [`routerLink` attribute ](#routerlink ) is set to `"/heroes"` , the string that the router matches to the route to `HeroesComponent` .
The `routerLink` is the selector for the [`RouterLink` directive ](api/router/RouterLink ) that turns user clicks into router navigations.
2017-11-06 18:02:18 +00:00
It's another of the public directives in the `RouterModule` .
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
The browser refreshes and displays the application title and heroes link, but not the heroes list.
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
Click the link.
2017-11-06 18:02:18 +00:00
The address bar updates to `/heroes` and the list of heroes appears.
2017-03-27 15:08:53 +00:00
2018-07-19 22:00:08 +00:00
< div class = "alert is-helpful" >
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
Make this and future navigation links look better by adding private CSS styles to `app.component.css` as listed in the [final code review ](#appcomponent ) below.
2017-02-22 18:09:39 +00:00
2017-04-10 15:51:13 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
## Add a dashboard view
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
Routing makes more sense when your application has more than one view, yet
the *Tour of Heroes* application has only the heroes view.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
To add a `DashboardComponent` , run `ng generate` as shown here:
2017-03-27 15:08:53 +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 dashboard
2017-03-27 15:08:53 +00:00
< / code-example >
2022-06-08 19:26:25 +00:00
`ng generate` creates the files for the `DashboardComponent` and declares it in `AppModule` .
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
Replace the default content in these files as shown here:
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +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/dashboard/dashboard.component.html" path = "toh-pt5/src/app/dashboard/dashboard.component.1.html" > < / code-pane >
< code-pane header = "src/app/dashboard/dashboard.component.ts" path = "toh-pt5/src/app/dashboard/dashboard.component.ts" > < / code-pane >
< code-pane header = "src/app/dashboard/dashboard.component.css" path = "toh-pt5/src/app/dashboard/dashboard.component.css" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
2017-03-27 15:08:53 +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
The *template* presents a grid of hero name links.
2017-03-27 15:08:53 +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
* The `*ngFor` repeater creates as many links as are in the component's `heroes` array.
* The links are styled as colored blocks by the `dashboard.component.css` .
2022-06-08 19:26:25 +00:00
* The links don't go anywhere yet.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The *class* is like the `HeroesComponent` class.
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
* It defines a `heroes` array property
* The constructor expects Angular to inject the `HeroService` into a private `heroService` property
* The `ngOnInit()` lifecycle hook calls `getHeroes()`
2017-03-30 19:04:18 +00:00
2022-06-08 19:26:25 +00:00
This `getHeroes()` returns the sliced list of heroes at positions 1 and 5, returning only Heroes two, three, four, and five.
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/dashboard/dashboard.component.ts" path = "toh-pt5/src/app/dashboard/dashboard.component.ts" region = "getHeroes" > < / code-example >
2017-03-31 11:23:16 +00:00
2017-11-06 18:02:18 +00:00
### Add the dashboard route
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
To navigate to the dashboard, the router needs an appropriate route.
2017-03-31 23:57:13 +00:00
2020-12-08 10:45:56 +00:00
Import the `DashboardComponent` in the `app-routing-module.ts` file.
2017-03-27 15:08:53 +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/app-routing.module.ts (import DashboardComponent)" path = "toh-pt5/src/app/app-routing.module.ts" region = "import-dashboard" > < / code-example >
2017-03-27 15:08:53 +00:00
2020-12-08 10:45:56 +00:00
Add a route to the `routes` array that matches a path to the `DashboardComponent` .
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/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" region = "dashboard-route" > < / code-example >
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
### Add a default route
2017-03-27 15:08:53 +00:00
2021-01-29 20:24:30 +00:00
When the application starts, the browser's address bar points to the web site's root.
2017-11-06 18:02:18 +00:00
That doesn't match any existing route so the router doesn't navigate anywhere.
The space below the `<router-outlet>` is blank.
2017-03-27 15:08:53 +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
To make the application navigate to the dashboard automatically, add the following route to the `routes` array.
2017-03-27 15:08:53 +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/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" region = "redirect-route" > < / code-example >
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
This route redirects a URL that fully matches the empty path to the route whose path is `'/dashboard'` .
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
After the browser refreshes, the router loads the `DashboardComponent` and the browser address bar shows the `/dashboard` URL.
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
### Add dashboard link to the shell
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
The user should be able to navigate between the `DashboardComponent` and the `HeroesComponent` by clicking links in the navigation area near the top of the page.
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
Add a dashboard navigation link to the `AppComponent` shell template, just above the *Heroes* link.
2017-03-27 15:08:53 +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/app.component.html" path = "toh-pt5/src/app/app.component.html" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
After the browser refreshes you can navigate freely between the two views by clicking the links.
2017-03-27 15:08:53 +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 = "hero-details" > < / a >
2017-11-06 18:02:18 +00:00
## Navigating to hero details
2017-03-27 15:08:53 +00:00
2021-04-11 16:37:30 +00:00
The `HeroDetailComponent` displays details of a selected hero.
At the moment the `HeroDetailComponent` is only visible at the bottom of the `HeroesComponent`
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +00:00
The user should be able to get to these details in three ways.
2017-11-27 21:38:30 +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
1. By clicking a hero in the dashboard.
1. By clicking a hero in the heroes list.
1. By pasting a "deep link" URL into the browser address bar that identifies the hero to display.
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
This section enables navigation to the `HeroDetailComponent` and liberate it from the `HeroesComponent` .
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
### Delete *hero details* from `HeroesComponent`
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
When the user clicks a hero in `HeroesComponent` , the application should navigate to the `HeroDetailComponent` , replacing the heroes list view with the hero detail view.
2017-11-06 18:02:18 +00:00
The heroes list view should no longer show hero details as it does now.
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
Open the `heroes/heroes.component.html` and delete the `<app-hero-detail>` element from the bottom.
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
Clicking a hero item now does nothing.
2022-06-08 19:26:25 +00:00
You can fix that after you enable routing to the `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
### Add a *hero detail* route
2017-02-22 18:09:39 +00:00
2019-01-31 19:25:30 +00:00
A URL like `~/detail/11` would be a good URL for navigating to the *Hero Detail* view of the hero whose `id` is `11` .
2017-02-22 18:09:39 +00:00
2020-12-08 10:45:56 +00:00
Open `app-routing.module.ts` and import `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
< code-example header = "src/app/app-routing.module.ts (import HeroDetailComponent)" path = "toh-pt5/src/app/app-routing.module.ts" region = "import-herodetail" > < / code-example >
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
Then add a *parameterized* route to the `routes` array that matches the path pattern to the *hero detail* view.
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/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" region = "detail-route" > < / code-example >
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
The colon `:` character in the `path` indicates that `:id` is a placeholder for a specific hero `id` .
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
At this point, all application routes are in place.
2017-03-27 15:08:53 +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/app-routing.module.ts (all routes)" path = "toh-pt5/src/app/app-routing.module.ts" region = "routes" > < / code-example >
2017-03-27 15:08:53 +00:00
2018-02-22 16:08:07 +00:00
### `DashboardComponent` hero links
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
The `DashboardComponent` hero links do nothing at the moment.
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
Now that the router has a route to `HeroDetailComponent` , fix the dashboard hero links to navigate using the *parameterized* dashboard route.
2017-03-27 15:08:53 +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/dashboard/dashboard.component.html (hero links)" path = "toh-pt5/src/app/dashboard/dashboard.component.html" region = "click" > < / code-example >
2017-03-27 15:08:53 +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're using Angular [interpolation binding ](guide/interpolation ) within the `*ngFor` repeater to insert the current iteration's `hero.id` into each [`routerLink` ](#routerlink ).
< a id = "heroes-component-links" > < / a >
2017-02-22 18:09:39 +00:00
2018-02-22 16:08:07 +00:00
### `HeroesComponent` hero links
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
The hero items in the `HeroesComponent` are `<li>` elements whose click events are bound to the component's `onSelect()` method.
2017-03-27 15:08:53 +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/heroes/heroes.component.html (list with onSelect)" path = "toh-pt4/src/app/heroes/heroes.component.html" region = "list" > < / code-example >
2017-03-27 15:08:53 +00:00
2022-10-07 16:59:51 +00:00
Remove the `<li>` back to just its `*ngFor` .
Wrap the badge and name in an anchor `<a>` element.
2022-06-08 19:26:25 +00:00
Add a `routerLink` attribute to the anchor that's the same as in the dashboard template.
2017-03-27 15:08:53 +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/heroes/heroes.component.html (list with links)" path = "toh-pt5/src/app/heroes/heroes.component.html" region = "list" > < / code-example >
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
Be sure to fix the private style sheet in `heroes.component.css` to make the list look as it did before.
2017-11-06 18:02:18 +00:00
Revised styles are in the [final code review ](#heroescomponent ) at the bottom of this guide.
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
#### Remove dead code - optional
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
While the `HeroesComponent` class still works, the `onSelect()` method and `selectedHero` property are no longer used.
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
It's nice to tidy things up for your future self.
2017-11-06 18:02:18 +00:00
Here's the class after pruning away the dead code.
2017-03-27 15:08:53 +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/heroes/heroes.component.ts (cleaned up)" path = "toh-pt5/src/app/heroes/heroes.component.ts" region = "class" > < / code-example >
2017-03-27 15:08:53 +00:00
2019-01-31 19:25:30 +00:00
## Routable `HeroDetailComponent`
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
The parent `HeroesComponent` used to set the `HeroDetailComponent.hero` property and the `HeroDetailComponent` displayed the hero.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
`HeroesComponent` doesn't do that anymore.
2022-06-08 15:12:06 +00:00
Now the router creates the `HeroDetailComponent` in response to a URL such as `~/detail/12` .
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The `HeroDetailComponent` needs a new way to get the hero to display.
2019-01-31 19:25:30 +00:00
This section explains the following:
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
* Get the route that created it
* Extract the `id` from the route
2022-06-08 19:26:25 +00:00
* Get the hero with that `id` from the server using the `HeroService`
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
Add the following imports:
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-pt5/src/app/hero-detail/hero-detail.component.ts" region = "added-imports" > < / code-example >
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 = "hero-detail-ctor" > < / a >
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
Inject the `ActivatedRoute` , `HeroService` , and `Location` services into the constructor, saving their values in private fields:
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" path = "toh-pt5/src/app/hero-detail/hero-detail.component.ts" region = "ctor" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
The [`ActivatedRoute` ](api/router/ActivatedRoute ) holds information about the route to this instance of the `HeroDetailComponent` .
2019-01-31 19:25:30 +00:00
This component is interested in the route's parameters extracted from the URL.
The "id" parameter is the `id` of the hero to display.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
The [`HeroService` ](tutorial/toh-pt4 ) gets hero data from the remote server and this component uses it to get the hero-to-display.
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
The [`location` ](api/common/Location ) is an Angular service for interacting with the browser.
2022-06-08 19:26:25 +00:00
This service lets you navigate back to the previous view.
2017-02-22 18:09:39 +00:00
2019-01-31 19:25:30 +00:00
### Extract the `id` route parameter
2017-03-30 19:04:18 +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
In the `ngOnInit()` [lifecycle hook ](guide/lifecycle-hooks#oninit ) call `getHero()` and define it as follows.
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-pt5/src/app/hero-detail/hero-detail.component.ts" region = "ngOnInit" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
The `route.snapshot` is a static image of the route information shortly after the component was created.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
The `paramMap` is a dictionary of route parameter values extracted from the URL.
The `"id"` key returns the `id` of the hero to fetch.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
Route parameters are always strings.
2021-04-11 17:29:15 +00:00
The JavaScript `Number` function converts the string to a number,
2017-11-06 18:02:18 +00:00
which is what a hero `id` should be.
2017-02-22 18:09:39 +00:00
2021-01-29 20:24:30 +00:00
The browser refreshes and the application crashes with a compiler error.
2017-11-06 18:02:18 +00:00
`HeroService` doesn't have a `getHero()` method.
Add it now.
2017-02-22 18:09:39 +00:00
2018-02-22 16:08:07 +00:00
### Add `HeroService.getHero()`
2017-03-30 19:04:18 +00:00
2019-01-31 19:25:30 +00:00
Open `HeroService` and add the following `getHero()` method with the `id` after the `getHeroes()` method:
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.service.ts (getHero)" path = "toh-pt5/src/app/hero.service.ts" region = "getHero" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
< div class = "alert is-important" >
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
**IMPORTANT**: < br / >
The backtick \( < code > ` </ code > \) characters define a JavaScript [template literal ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals ) for embedding the `id` .
2017-11-06 18:02:18 +00:00
< / div >
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
Like [`getHeroes()` ](tutorial/toh-pt4#observable-heroservice ), `getHero()` has an asynchronous signature.
It returns a *mock hero* as an `Observable` , using the RxJS `of()` function.
2017-02-22 18:09:39 +00:00
2022-06-08 19:26:25 +00:00
You can rewrite `getHero()` as a real `Http` request without having to change the `HeroDetailComponent` that calls it.
2017-03-27 15:08:53 +00:00
2022-10-07 16:59:51 +00:00
<!-- markdownlint - disable MD024 -->
2017-11-06 18:02:18 +00:00
#### Try it
2017-03-31 23:57:13 +00:00
2021-01-29 20:24:30 +00:00
The browser refreshes and the application is working again.
2017-11-06 18:02:18 +00:00
You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
2017-03-31 23:57:13 +00:00
2022-06-08 19:26:25 +00:00
If you paste `localhost:4200/detail/12` in the browser address bar, the router navigates to the detail view for the hero with `id: 12` , **Dr Nice** .
2017-03-31 11:23:16 +00:00
2022-10-07 16:59:51 +00:00
<!-- markdownlint - enable MD024 -->
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 = "goback" > < / a >
2017-03-31 11:23:16 +00:00
2017-11-06 18:02:18 +00:00
### Find the way back
2017-03-31 11:23:16 +00:00
2022-06-08 19:26:25 +00:00
By clicking the browser's back button, you can go back to the previous page. This could be the hero list or dashboard view, depending upon which sent you to the detail view.
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +00:00
It would be nice to have a button on the `HeroDetail` view that can do that.
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
Add a *go back* button to the bottom of the component template and bind it to the component's `goBack()` method.
2017-03-31 11:23:16 +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 (back button)" path = "toh-pt5/src/app/hero-detail/hero-detail.component.html" region = "back-button" > < / code-example >
2017-03-31 11:23:16 +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
Add a `goBack()` *method* to the component class that navigates backward one step in the browser's history stack
2022-06-08 19:26:25 +00:00
using the `Location` service that you [used to inject ](#hero-detail-ctor ).
2017-03-31 11:23:16 +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 (goBack)" path = "toh-pt5/src/app/hero-detail/hero-detail.component.ts" region = "goBack" > < / code-example >
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
Refresh the browser and start clicking.
2022-06-08 19:26:25 +00:00
Users can now navigate around the application using the new buttons.
2017-03-27 15:08:53 +00:00
2022-06-08 19:26:25 +00:00
The details look better when you add the private CSS styles to `hero-detail.component.css` as listed in one of the ["final code review" ](#final-code-review ) tabs below.
2021-03-14 23:00:39 +00:00
2017-11-06 18:02:18 +00:00
## Final code review
2017-03-31 23:57:13 +00:00
2022-10-07 16:59:51 +00:00
<!-- markdownlint - disable MD001 -->
2020-04-10 17:10:59 +00:00
Here are the code files discussed on this page.
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
< a id = "approutingmodule" > < / a >
< a id = "appmodule" > < / a >
2019-01-31 19:25:30 +00:00
#### `AppRoutingModule`, `AppModule`, and `HeroService`
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +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/app.module.ts" path = "toh-pt5/src/app/app.module.ts" > < / code-pane >
2022-04-30 14:13:36 +00:00
< code-pane header = "src/app/app-routing.module.ts" path = "toh-pt5/src/app/app-routing.module.ts" > < / code-pane >
< code-pane header = "src/app/hero.service.ts" path = "toh-pt5/src/app/hero.service.ts" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
2017-03-27 15:08:53 +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 = "appcomponent" > < / a >
2019-01-31 19:25:30 +00:00
#### `AppComponent`
2017-02-22 18:09:39 +00:00
2017-11-06 18:02:18 +00:00
< code-tabs >
2022-04-30 14:13:36 +00:00
< code-pane header = "src/app/app.component.html" path = "toh-pt5/src/app/app.component.html" > < / code-pane >
< code-pane header = "src/app/app.component.ts" path = "toh-pt5/src/app/app.component.ts" > < / code-pane >
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.component.css" path = "toh-pt5/src/app/app.component.css" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
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 = "dashboardcomponent" > < / a >
2019-01-31 19:25:30 +00:00
#### `DashboardComponent`
2017-03-31 23:57:13 +00:00
2017-11-06 18:02:18 +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/dashboard/dashboard.component.html" path = "toh-pt5/src/app/dashboard/dashboard.component.html" > < / code-pane >
< code-pane header = "src/app/dashboard/dashboard.component.ts" path = "toh-pt5/src/app/dashboard/dashboard.component.ts" > < / code-pane >
< code-pane header = "src/app/dashboard/dashboard.component.css" path = "toh-pt5/src/app/dashboard/dashboard.component.css" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
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
< a id = "heroescomponent" > < / a >
2019-01-31 19:25:30 +00:00
#### `HeroesComponent`
2018-02-22 16:08:07 +00:00
2017-11-06 18:02:18 +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/heroes/heroes.component.html" path = "toh-pt5/src/app/heroes/heroes.component.html" > < / code-pane >
< code-pane header = "src/app/heroes/heroes.component.ts" path = "toh-pt5/src/app/heroes/heroes.component.ts" > < / code-pane >
< code-pane header = "src/app/heroes/heroes.component.css" path = "toh-pt5/src/app/heroes/heroes.component.css" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
2017-03-27 15:08:53 +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 = "herodetailcomponent" > < / a >
2019-01-31 19:25:30 +00:00
#### `HeroDetailComponent`
2017-03-27 15:08:53 +00:00
2017-11-06 18:02:18 +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.html" path = "toh-pt5/src/app/hero-detail/hero-detail.component.html" > < / code-pane >
< code-pane header = "src/app/hero-detail/hero-detail.component.ts" path = "toh-pt5/src/app/hero-detail/hero-detail.component.ts" > < / code-pane >
< code-pane header = "src/app/hero-detail/hero-detail.component.css" path = "toh-pt5/src/app/hero-detail/hero-detail.component.css" > < / code-pane >
2017-11-06 18:02:18 +00:00
< / code-tabs >
2017-03-31 23:57:13 +00:00
2022-10-07 16:59:51 +00:00
<!-- markdownlint - enable MD001 -->
2017-11-06 18:02:18 +00:00
## Summary
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 added the Angular router to navigate among different components
* You turned the `AppComponent` into a navigation shell with `<a>` links and a `<router-outlet>`
* You configured the router in an `AppRoutingModule`
* You defined routes, a redirect route, and a parameterized route
* You used the `routerLink` directive in anchor elements
2022-06-08 19:26:25 +00:00
* You refactored a tightly coupled main/detail view into a routed detail view
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 router link parameters to navigate to the detail view of a user-selected hero
2022-06-08 19:26:25 +00:00
* You shared the `HeroService` with other components
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
@reviewed 2022-02-28
