@@ -24,19 +24,19 @@ a#directive-overview
24
24
## Directives overview
25
25
26
26
There are three kinds of directives in Angular:
27
-
27
+
28
28
1. Components — directives with a template.
29
29
1. Structural directives — change the DOM layout by adding and removing DOM elements.
30
30
1. Attribute directives — change the appearance or behavior of an element, component, or another directive.
31
31
32
32
*Components* are the most common of the three directives.
33
33
You saw a component for the first time in the [QuickStart](../quickstart.html) example.
34
34
35
- *Structural Directives* change the structure of the view.
35
+ *Structural Directives* change the structure of the view.
36
36
Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf).
37
37
Learn about them in the [Structural Directives](structural-directives.html) guide.
38
38
39
- *Attribute directives* are used as attributes of elements.
39
+ *Attribute directives* are used as attributes of elements.
40
40
The built-in [NgStyle](template-syntax.html#ngStyle) directive in the [Template Syntax](template-syntax.html) guide, for example,
41
41
can change several element styles at the same time.
42
42
@@ -151,12 +151,12 @@ figure.image-display
151
151
152
152
:marked
153
153
Angular detects that you're trying to bind to *something* but it can't find this directive
154
- in the module's `declarations` array.
155
- After specifying `HighlightDirective` in the `declarations` array,
154
+ in the module's `declarations` array.
155
+ After specifying `HighlightDirective` in the `declarations` array,
156
156
Angular knows it can apply the directive to components declared in this module.
157
157
158
158
:marked
159
- To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
159
+ To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
160
160
It created an instance of the `HighlightDirective` class and
161
161
injected a reference to the `<p>` element into the directive's constructor
162
162
which sets the `<p>` element's background style to yellow.
@@ -220,8 +220,8 @@ a#input
220
220
### Binding to an _@Input_ property
221
221
222
222
Notice the `@Input` !{_decorator}. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
223
-
224
- It's called an *input* property because data flows from the binding expression _into_ the directive.
223
+
224
+ It's called an *input* property because data flows from the binding expression _into_ the directive.
225
225
Without that input metadata, Angular rejects the binding; see [below](#why-input "Why add @Input?") for more about that.
226
226
227
227
Try it by adding the following directive binding variations to the `AppComponent` template:
@@ -239,7 +239,7 @@ a#input
239
239
+ makeExample('attribute-directives/ts/src/app/app.component.html' ,'color' )
240
240
241
241
:marked
242
- The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
242
+ The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
243
243
and sets the directive's highlight color with a property binding.
244
244
You're re-using the directive's attribute selector (`[myHighlight]`) to do both jobs.
245
245
That's a crisp, compact syntax.
@@ -254,8 +254,8 @@ a#input-alias
254
254
### Bind to an _@Input_ alias
255
255
256
256
Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
257
-
258
- Restore the original property name and specify the selector as the alias in the argument to `@Input`.
257
+
258
+ Restore the original property name and specify the selector as the alias in the argument to `@Input`.
259
259
260
260
+ makeExcerpt('src/app/highlight.directive.ts' , 'color' , 'src/app/highlight.directive.ts (color property with alias' )
261
261
:marked
@@ -266,7 +266,7 @@ a#input-alias
266
266
+ makeExample('attribute-directives/ts/src/app/app.component.html' ,'color' )
267
267
268
268
:marked
269
- Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
269
+ Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
270
270
If someone neglects to bind to `highlightColor`, highlight in "red" by default.
271
271
272
272
+ makeExample('attribute-directives/ts/src/app/highlight.directive.3.ts' , 'mouse-enter' , 'src/app/highlight.directive.ts (mouse enter)' )( format ='.' )
@@ -280,7 +280,7 @@ a#input-alias
280
280
It may be difficult to imagine how this directive actually works.
281
281
In this section, you'll turn `AppComponent` into a harness that
282
282
lets you pick the highlight color with a radio button and bind your color choice to the directive.
283
-
283
+
284
284
Update `app.component.html` as follows:
285
285
286
286
+ makeExcerpt('attribute-directives/ts/src/app/app.component.html' , 'v2' , '' )
@@ -300,7 +300,7 @@ a#second-property
300
300
## Bind to a second property
301
301
This highlight directive has a single customizable property. In a real app, it may need more.
302
302
303
- At the moment, the default color — the color that prevails until the user picks a highlight color —
303
+ At the moment, the default color — the color that prevails until the user picks a highlight color —
304
304
is hard-coded as "red". Let the template developer set the default color.
305
305
306
306
Add a second **input** property to `HighlightDirective` called `defaultColor`:
@@ -313,11 +313,11 @@ a#second-property
313
313
How do you bind to a second property when you're already binding to the `myHighlight` attribute name?
314
314
315
315
As with components, you can add as many directive property bindings as you need by stringing them along in the template.
316
- The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
316
+ The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
317
317
and fall back to "violet" as the default color.
318
318
+ makeExample('attribute-directives/ts/src/app/app.component.html' , 'defaultColor' )( format ="." )
319
319
:marked
320
- Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
320
+ Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
321
321
because you made it _public_ with the `@Input` !{_decorator}.
322
322
323
323
Here's how the harness should work when you're done coding.
@@ -368,11 +368,11 @@ a#why-input
368
368
+ makeExample('attribute-directives/ts/src/app/highlight.directive.ts' ,'color' )
369
369
370
370
:marked
371
- Either way, the `@Input` !{_decorator} tells Angular that this property is
371
+ Either way, the `@Input` !{_decorator} tells Angular that this property is
372
372
_public_ and available for binding by a parent component.
373
373
Without `@Input`, Angular refuses to bind to the property.
374
374
375
- You've bound template HTML to component properties before and never used `@Input`.
375
+ You've bound template HTML to component properties before and never used `@Input`.
376
376
What's different?
377
377
378
378
The difference is a matter of trust.
@@ -384,9 +384,9 @@ a#why-input
384
384
But a component or directive shouldn't blindly trust _other_ components and directives.
385
385
The properties of a component or directive are hidden from binding by default.
386
386
They are _private_ from an Angular binding perspective.
387
- When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
387
+ When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
388
388
Only then can it be bound by some other component or directive.
389
-
389
+
390
390
You can tell if `@Input` is needed by the position of the property name in a binding.
391
391
392
392
* When it appears in the template expression to the ***right*** of the equals (=),
@@ -399,7 +399,7 @@ a#why-input
399
399
Now apply that reasoning to the following example:
400
400
+ makeExample('attribute-directives/ts/src/app/app.component.html' ,'color' )( format ="." )
401
401
:marked
402
- * The `color` property in the expression on the right belongs to the template's component.
402
+ * The `color` property in the expression on the right belongs to the template's component.
403
403
The template and its component trust each other.
404
404
The `color` property doesn't require the `@Input` !{_decorator}.
405
405
0 commit comments