You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
The template is a multi-line string within ECMAScript 2015 backticks (<code>\`</code>).
64
-
The backtick (<code>\`</code>) — which is *not* the same character as a single
65
-
quote (`'`) — has many nice features. The feature we're exploiting here
66
-
is the ability to compose the string over several lines, which makes for
67
-
much more readable HTML.
63
+
The backtick (<code>\`</code>)—which is *not* the same character as a single
64
+
quote (`'`)—allows you to compose a string over several lines, which makes the
65
+
HTML more readable.
68
66
69
67
:marked
70
68
Angular automatically pulls the value of the `title` and `myHero` properties from the component and
@@ -74,43 +72,42 @@ block quickstart-repo
74
72
.l-sub-section
75
73
:marked
76
74
More precisely, the redisplay occurs after some kind of asynchronous event related to
77
-
the view such as a keystroke, a timer completion, or an async `XHR` response.
78
-
We don't have those in this sample.
79
-
But then the properties aren't changing on their own either. For the moment we must operate on faith.
75
+
the view, such as a keystroke, a timer completion, or a response to an HTTP request.
80
76
81
77
:marked
82
-
Notice that we haven't called **new** to create an instance of the `AppComponent` class.
83
-
Angular is creating an instance for us. How?
78
+
Notice that you don't call **new** to create an instance of the `AppComponent` class.
79
+
Angular is creating an instance for you. How?
84
80
85
-
Notice the CSS `selector` in the `@Component` !{_decorator} that specifies an element named `my-app`.
86
-
Remember back in [QuickStart](../quickstart.html) that we added the `<my-app>` element to the body of our `index.html` file:
81
+
The CSS `selector` in the `@Component` !{_decorator} specifies an element named `my-app`.
82
+
Remember back in [QuickStart](../quickstart.html) that you added the `<my-app>`
83
+
element to the body of your `index.html` file:
87
84
88
85
+makeExcerpt('index.html', 'body')
89
86
90
87
:marked
91
-
When we bootstrap with the `AppComponent` class (in <ngio-ex path="main.ts"></ngio-ex>), Angular looks for a `<my-app>`
88
+
When you bootstrap with the `AppComponent` class (in <ngio-ex path="main.ts"></ngio-ex>), Angular looks for a `<my-app>`
92
89
in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
93
90
inside the `<my-app>` tag.
94
91
95
-
Try running the app. It should display the title and hero name:
92
+
Now run the app. It should display the title and hero name:
96
93
figure.image-display
97
94
img(src="/resources/images/devguide/displaying-data/title-and-hero.png"alt="Title and Hero")
98
95
99
96
+ifDocsFor('ts')
100
97
:marked
101
-
Let's review some of the choices we made and consider alternatives.
98
+
The next few sections review some of the coding choices in the app.
102
99
103
100
:marked
104
101
## Template inline or template file?
105
102
106
-
We can store our component's template in one of two places.
107
-
We can define it *inline* using the `template` property, as we do here.
108
-
Or we can define the template in a separate HTML file and link to it in
103
+
You can store your component's template in one of two places.
104
+
You can define it *inline* using the `template` property, or you can define
105
+
the template in a separate HTML file and link to it in
109
106
the component metadata using the `@Component` !{_decorator}'s `templateUrl` property.
110
107
111
108
The choice between inline and separate HTML is a matter of taste,
112
109
circumstances, and organization policy.
113
-
Here we're using inline HTML because the template is small, and the demo
110
+
Here the app uses inline HTML because the template is small and the demo
114
111
is simpler without the additional HTML file.
115
112
116
113
In either style, the template data bindings have the same access to the component's properties.
@@ -119,59 +116,53 @@ figure.image-display
119
116
:marked
120
117
## Constructor or variable initialization?
121
118
122
-
We initialized our component properties using variable assignment.
123
-
This is a wonderfully concise and compact technique.
119
+
Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
124
120
125
-
Some folks prefer to declare the properties and initialize them within a constructor like this:
That's fine too. The choice is a matter of taste and organization policy.
130
-
We'll adopt the more terse "variable assignment" style in this chapter simply because
131
-
there will be less code to read.
124
+
This app uses more terse "variable assignment" style simply for brevity.
132
125
133
126
.l-main-section#ngFor
134
127
:marked
135
128
## Showing !{_an} !{_array} property with ***ngFor**
136
129
137
-
We want to display a list of heroes. We begin by adding !{_an} !{_array} of hero names to the component and redefine `myHero` to be the first name in the !{_array}.
130
+
To display a list of heroes, begin by adding !{_an} !{_array} of hero names to the component and redefine `myHero` to be the first name in the !{_array}.
138
131
139
132
+makeExcerpt('app/app.component.2.ts', 'class')
140
133
141
134
:marked
142
-
Now we use the Angular `ngFor` directive in the template to display
135
+
Now use the Angular `ngFor` directive in the template to display
Our display looks the same, but now we know much better what a hero really is.
223
+
The display looks the same, but the code is clearer.
231
224
232
225
.l-main-section#ngIf
233
226
:marked
234
227
## Conditional display with NgIf
235
228
236
229
Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
237
230
238
-
In our example, we'd like to display a message if we have a large number of heroes, say, more than 3.
231
+
Let's change the exampleto display a message if there are more than three heroes.
239
232
240
233
The Angular `ngIf` directive inserts or removes an element based on a !{_boolean} condition.
241
-
We can see it in action by adding the following paragraph at the bottom of the template:
234
+
To see it in action, add the following paragraph at the bottom of the template:
242
235
243
236
+makeExcerpt('app/app.component.ts', 'message')
244
237
245
238
.alert.is-important
246
239
:marked
247
240
Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
248
-
Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
241
+
Read more about `ngIf` and `*` in the [ngIf section](./template-syntax.html#ngIf) of the [Template Syntax](./template-syntax.html) page.
249
242
250
243
:marked
251
-
The [template expression](./template-syntax.html#template-expressions) inside the double quotes
252
-
looks much like !{_Lang}, and it _is_ much like !{_Lang}.
253
-
When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
254
-
If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
244
+
The template expression inside the double quotes,
245
+
`*ngIf="heros.length > 3"`, looks and behaves much like !{_Lang}.
246
+
When the component's list of heroes has more than three items, Angular adds the paragraph
247
+
to the DOM and the message appears. If there are three or fewer items, Angular omits the
248
+
paragraph, so no message appears. For more information,
249
+
see the [template expressions](./template-syntax.html#template-expressions) section of the
250
+
[Template Syntax](./template-syntax.html) page.
255
251
256
252
.alert.is-helpful
257
253
:marked
258
-
Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM.
259
-
That hardly matters here. But it would matter a great deal, from a performance perspective, if
260
-
we were conditionally including or excluding a big chunk of HTML with many data bindings.
254
+
Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
255
+
big chunks of HTML with many data bindings.
261
256
262
257
:marked
263
258
Try it out. Because the !{_array} has four items, the message should appear.
@@ -267,18 +262,18 @@ block hero-class
267
262
.l-main-section
268
263
:marked
269
264
## Summary
270
-
Now we know how to use:
271
-
- **Interpolation** with double curly braces to display a component property
272
-
- **ngFor** to display !{_an} !{_array} of items
273
-
- A !{_Lang} class to shape the **model data** for our component and display properties of that model
274
-
- **ngIf** to conditionally display a chunk of HTML based on a boolean expression
265
+
Now you know how to use:
266
+
- **Interpolation** with double curly braces to display a component property.
267
+
- **ngFor** to display !{_an} !{_array} of items.
268
+
- A !{_Lang} class to shape the **model data** for your component and display properties of that model.
269
+
- **ngIf** to conditionally display a chunk of HTML based on a boolean expression.
0 commit comments