@@ -30,7 +30,7 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
30
30
### Keep the app transpiling and running
31
31
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
32
32
33
- code-example( format = "." language ="bash" ) .
33
+ code-example( language ="bash" ) .
34
34
npm start
35
35
36
36
:marked
@@ -54,7 +54,7 @@ code-example(format="." language="bash").
54
54
### Separating the Hero Detail Component
55
55
Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
56
56
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 ="." )
58
58
.l-sub-section
59
59
:marked
60
60
### Naming conventions
@@ -65,7 +65,8 @@ code-example(format="." language="bash").
65
65
66
66
All of our component names end in "Component". All of our component file names end in ".component".
67
67
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
69
70
case sensitivity on the server or in source control.
70
71
71
72
<!-- TODO
@@ -92,7 +93,7 @@ code-example(format="." language="bash").
92
93
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
93
94
The result looks like this:
94
95
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 ="." )
96
97
97
98
:marked
98
99
Now our hero detail layout exists only in the `HeroDetailComponent`.
@@ -106,13 +107,13 @@ code-example(format="." language="bash").
106
107
107
108
We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
108
109
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 ="." )
110
111
111
112
:marked
112
113
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`** .
114
115
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' )
116
117
117
118
:marked
118
119
#### The *hero* property is an ***input***
@@ -171,7 +172,7 @@ code-example(format=".")
171
172
:marked
172
173
The `AppComponent`’s template should now look like this
173
174
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 ='.' )
175
176
:marked
176
177
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
177
178
The detail should update every time the user picks a new hero.
0 commit comments