Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add HeroService to code tabs and fix headers #22373

Closed
wants to merge 1 commit into from
Closed

docs: add HeroService to code tabs and fix headers #22373

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 12 additions & 7 deletions aio/content/tutorial/toh-pt5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ When you’re done, users will be able to navigate the app like this:

</figure>

## Add the _AppRoutingModule_
## Add the `AppRoutingModule`

An Angular best practice is to load and configure the router in a separate, top-level module
that is dedicated to routing and imported by the root `AppModule`.
Expand Down Expand Up @@ -138,7 +138,7 @@ You should see the familiar heroes master/detail view.

{@a routerlink}

## Add a navigation link (_routerLink_)
## Add a navigation link (`routerLink`)

Users shouldn't have to paste a route URL into the address bar.
They should be able to click a link to navigate.
Expand Down Expand Up @@ -283,7 +283,7 @@ The user should be able to get to these details in three ways.
In this section, you'll enable navigation to the `HeroDetailsComponent`
and liberate it from the `HeroesComponent`.

### Delete _hero details_ from _HeroesComponent_
### Delete _hero details_ from `HeroesComponent`

When the user clicks a hero item in the `HeroesComponent`,
the app should navigate to the `HeroDetailComponent`,
Expand Down Expand Up @@ -325,7 +325,7 @@ At this point, all application routes are in place.
title="src/app/app-routing.module.ts (all routes)">
</code-example>

### _DashboardComponent_ hero links
### `DashboardComponent` hero links

The `DashboardComponent` hero links do nothing at the moment.

Expand All @@ -343,7 +343,7 @@ to insert the current interation's `hero.id` into each
[`routerLink`](#routerlink).

{@a heroes-component-links}
### _HeroesComponent_ hero links
### `HeroesComponent` hero links

The hero items in the `HeroesComponent` are `<li>` elements whose click events
are bound to the component's `onSelect()` method.
Expand Down Expand Up @@ -446,7 +446,7 @@ The browser refreshes and the app crashes with a compiler error.
`HeroService` doesn't have a `getHero()` method.
Add it now.

### Add *HeroService.getHero()*
### Add `HeroService.getHero()`

Open `HeroService` and add this `getHero()` method

Expand Down Expand Up @@ -518,7 +518,7 @@ Here are the code files discussed on this page and your app should look like thi

{@a approutingmodule}
{@a appmodule}
#### _AppRoutingModule_ and _AppModule_
#### _AppRoutingModule_, _AppModule_, and _HeroService_

<code-tabs>
<code-pane
Expand All @@ -529,6 +529,10 @@ Here are the code files discussed on this page and your app should look like thi
title="src/app/app.module.ts"
path="toh-pt5/src/app/app.module.ts">
</code-pane>
<code-pane
title="src/app/hero.service.ts"
path="toh-pt5/src/app/hero.service.ts">
</code-pane>
</code-tabs>

{@a appcomponent}
Expand Down Expand Up @@ -565,6 +569,7 @@ Here are the code files discussed on this page and your app should look like thi

{@a heroescomponent}
#### _HeroesComponent_

<code-tabs>
<code-pane
title="src/app/heroes/heroes.component.html" path="toh-pt5/src/app/heroes/heroes.component.html">
Expand Down