@@ -30,7 +30,7 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
3030 ### Keep the app transpiling and running
3131 We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
3232
33- code-example( format = "." language ="bash" ) .
33+ code-example( language ="bash" ) .
3434 npm start
3535
3636:marked
@@ -54,7 +54,7 @@ code-example(format="." language="bash").
5454 ### Separating the Hero Detail Component
5555 Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
5656
57- + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'v1' , 'hero-detail.component.ts (initial version)' )( format ="." )
57+ + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'v1' , 'app/ hero-detail.component.ts (initial version)' )( format ="." )
5858.l-sub-section
5959 :marked
6060 ### Naming conventions
@@ -65,7 +65,8 @@ code-example(format="." language="bash").
6565
6666 All of our component names end in "Component". All of our component file names end in ".component".
6767
68- We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about
68+ We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)**
69+ (AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about
6970 case sensitivity on the server or in source control.
7071
7172 <!-- TODO
@@ -92,7 +93,7 @@ code-example(format="." language="bash").
9293 So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
9394 The result looks like this:
9495
95- + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'template' , 'hero-detail.component.ts (template)' )( format ="." )
96+ + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'template' , 'app/ hero-detail.component.ts (template)' )( format ="." )
9697
9798:marked
9899 Now our hero detail layout exists only in the `HeroDetailComponent`.
@@ -106,13 +107,13 @@ code-example(format="." language="bash").
106107
107108 We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
108109
109- + makeExample('toh-3/ts/app/hero.ts' , null , 'hero.ts (Exported Hero class) ' )( format ="." )
110+ + makeExample('toh-3/ts/app/hero.ts' , '' , 'app/ hero.ts' )( format ="." )
110111
111112:marked
112113 We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
113- Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
114+ Add the following import statement near the top of ** both `app.component.ts` and `hero-detail.component.ts`** .
114115
115- + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'hero-import' , 'hero-detail.component.ts and app.component.ts (Import the Hero class)' )
116+ + makeExample('toh-3/ts/app/hero-detail.component.ts' , 'hero-import' )
116117
117118:marked
118119 #### The *hero* property is an ***input***
@@ -171,7 +172,7 @@ code-example(format=".")
171172:marked
172173 The `AppComponent`’s template should now look like this
173174
174- + makeExample('toh-3/ts/app/app.component.ts' , 'hero-detail-template' , 'app.component.ts (Template )' )( format ='.' )
175+ + makeExample('toh-3/ts/app/app.component.ts' , 'hero-detail-template' , 'app.component.ts (template )' )( format ='.' )
175176:marked
176177 Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
177178 The detail should update every time the user picks a new hero.
0 commit comments