@@ -50,7 +50,7 @@ code-example(language="bash").
50
50
### Creating heroes
51
51
Let’s create an array of ten heroes at the bottom of `app.component.ts`.
52
52
53
- + makeExample('toh-2/ts/app/app.component.ts' , 'hero-array' , 'app.component.ts (Hero array)' )
53
+ + makeExample('toh-2/ts/app/app.component.ts' , 'hero-array' , 'app.component.ts (hero array)' )
54
54
55
55
:marked
56
56
The `HEROES` array is of type `Hero`, the class defined in part one,
@@ -59,9 +59,9 @@ code-example(language="bash").
59
59
first and display mock heroes.
60
60
61
61
### Exposing heroes
62
- Let’s create a property in `AppComponent` that exposes the heroes for binding.
62
+ Let’s create a public property in `AppComponent` that exposes the heroes for binding.
63
63
64
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'hero-array-1' , 'app.component.ts (Hero array property)' )
64
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'hero-array-1' , 'app.component.ts (hero array property)' )
65
65
66
66
:marked
67
67
We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array.
@@ -76,7 +76,7 @@ code-example(language="bash").
76
76
Our component has `heroes`. Let’s create an unordered list in our template to display them.
77
77
We’ll insert the following chunk of HTML below the title and above the hero details.
78
78
79
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'heroes-template-1' , 'app.component.ts (Heroes template)' )
79
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'heroes-template-1' , 'app.component.ts (heroes template)' )
80
80
81
81
:marked
82
82
Now we have a template that we can fill with our heroes.
@@ -107,7 +107,7 @@ code-example(language="bash").
107
107
“*take each hero in the `heroes` array, store it in the local `hero` variable,
108
108
and make it available to the corresponding template instance*”.
109
109
110
- The `let` keyword before "hero" identifies the `hero` as a template input variable.
110
+ The `let` keyword before "hero" identifies `hero` as a template input variable.
111
111
We can reference this variable within the template to access a hero’s properties.
112
112
113
113
Learn more about `ngFor` and template input variables in the
@@ -130,21 +130,20 @@ code-example(language="bash").
130
130
Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
131
131
to the following CSS classes:
132
132
133
- + makeExample('toh-2/ts/app/app.component.ts' , 'styles-1' , 'app.component.ts (Styling)' )
133
+ + makeExample('toh-2/ts/app/app.component.ts' , 'styles-1' , 'app.component.ts (styles)' ) ( format = "." )
134
134
135
135
:marked
136
136
Notice that we again use the back-tick notation for multi-line strings.
137
137
138
+ That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
139
+ We'll do this in a later chapter. For now let's keep rolling.
140
+
138
141
When we assign styles to a component they are scoped to that specific component.
139
142
Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
140
143
141
144
Our template for displaying the heroes should now look like this:
142
145
143
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'heroes-styled' , 'app.component.ts (Styled heroes)' )
144
-
145
- :marked
146
- That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
147
- We'll do this in a later chapter. For now let's keep rolling.
146
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'heroes-styled' , 'app.component.ts (styled heroes)' )
148
147
149
148
.l-main-section
150
149
:marked
@@ -160,7 +159,7 @@ code-example(language="bash").
160
159
### Click event
161
160
We modify the `<li>` by inserting an Angular event binding to its click event.
162
161
163
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'selectedHero-click' , 'app.component.ts (Capturing the click event )' )
162
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'selectedHero-click' , 'app.component.ts (template excerpt )' )
164
163
165
164
:marked
166
165
Focus on the event binding
@@ -204,7 +203,7 @@ code-example(language="bash").
204
203
At the moment, it is still referring to the old `hero` property.
205
204
Let’s fix the template to bind to the new `selectedHero` property.
206
205
207
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'selectedHero-details' , 'app.component.ts (Binding to the selectedHero \' s name )' )
206
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'selectedHero-details' , 'app.component.ts (template excerpt )' )
208
207
:marked
209
208
### Hide the empty detail with ngIf
210
209
@@ -266,16 +265,16 @@ code-example(language="bash").
266
265
267
266
The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
268
267
We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
269
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'class-selected-1' , 'app.component.ts (Setting the CSS class)' )( format ="." )
268
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'class-selected-1' , 'app.component.ts (setting the CSS class)' )( format ="." )
270
269
:marked
271
270
Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
272
- This is the syntax for a Property Binding , a binding in which data flows one way
271
+ This is the syntax for a **property binding** , a binding in which data flows one way
273
272
from the data source (the expression `hero === selectedHero`) to a property of `class`.
274
- + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'class-selected-2' , 'app.component.ts (Styling each hero)' )( format ="." )
273
+ + makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts' , 'class-selected-2' , 'app.component.ts (styling each hero)' )( format ="." )
275
274
276
275
.l-sub-section
277
276
:marked
278
- Learn more about [Property Binding ](../guide/template-syntax.html#property-binding)
277
+ Learn more about [property bindings ](../guide/template-syntax.html#property-binding)
279
278
in the Template Syntax chapter.
280
279
281
280
:marked
0 commit comments