diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index f517177536..0886ea6aa2 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -10,7 +10,7 @@ In this page, you'll take the first step in that direction by moving the hero de The `HeroesComponent` will only present the list of heroes. The `HeroDetailsComponent` will present details of a selected hero. -## Make the _HeroDetailComponent_ +## Make the `HeroDetailComponent` Use the Angular CLI to generate a new component named `hero-detail`. @@ -34,7 +34,7 @@ When you're done, the `HeroDetailComponent` template should look like this: -### Add the *@Input() hero* property +### Add the `@Input()` hero property The `HeroDetailComponent` template binds to the component's `hero` property which is of type `Hero`. @@ -67,7 +67,7 @@ That's the only change you should make to the `HeroDetailComponent` class. There are no more properties. There's no presentation logic. This component simply receives a hero object through its `hero` property and displays it. -## Show the _HeroDetailComponent_ +## Show the `HeroDetailComponent` The `HeroesComponent` is still a master/detail view. @@ -82,14 +82,14 @@ You won't change the `HeroesComponent` _class_ but you will change its _template {@a heroes-component-template} -### Update the _HeroesComponent_ template +### Update the `HeroesComponent` template The `HeroDetailComponent` selector is `'app-hero-detail'`. Add an `` element near the bottom of the `HeroesComponent` template, where the hero detail view used to be. Bind the `HeroesComponent.selectedHero` to the element's `hero` property like this. - + @@ -139,7 +139,7 @@ Here are the code files discussed on this page and your app should look like thi - +