docs(attribute-binding): bind to 2nd property, default-color

This commit is contained in:
Ward Bell 2015-12-03 12:41:58 -08:00
parent fb2b979928
commit 4d1571254b
6 changed files with 58 additions and 12 deletions

View File

@ -16,6 +16,6 @@
}, },
"devDependencies": { "devDependencies": {
"live-server": "^0.8.2", "live-server": "^0.8.2",
"typescript": "^1.6.2" "typescript": "^1.7.3"
} }
} }

View File

@ -1,4 +1,5 @@
<!-- #docregion --> <!-- #docregion -->
<!-- #docregion v2 -->
<h1>My First Attribute Directive</h1> <h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4> <h4>Pick a highlight color</h4>
<div> <div>
@ -6,7 +7,15 @@
<input type="radio" name="colors" (click)="color='yellow'">Yellow <input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div> </div>
<!-- #docregion span --> <!-- #docregion span -->
<p><span [my-highlight]="color">Highlight me!</span></p> <p><span [my-highlight]="color">Highlight me!</span></p>
<!-- #enddocregion span --> <!-- #enddocregion span -->
<!-- #enddocregion v2 -->
<!-- #docregion defaultColor -->
<p><span [my-highlight]="color" [default-color]="'violet'">
Highlight me too!
</span></p>
<!-- #enddocregion defaultColor -->
<!-- #enddocregion --> <!-- #enddocregion -->

View File

@ -10,9 +10,9 @@ import {Directive, ElementRef, Renderer, Input} from 'angular2/angular2';
} }
}) })
// #docregion class // #docregion class-1
export class Highlight { export class Highlight {
// #enddocregion class // #enddocregion class-1
// #enddocregion full // #enddocregion full
/* /*
// #docregion highlight // #docregion highlight
@ -20,12 +20,19 @@ export class Highlight {
// #enddocregion highlight // #enddocregion highlight
*/ */
// #docregion full // #docregion full
// #docregion class // #docregion class-1
// #docregion color // #docregion color
@Input('my-highlight') highlightColor: string; @Input('my-highlight') highlightColor: string;
// #enddocregion color // #enddocregion color
private _defaultColor = 'red'; private _defaultColor = 'red';
// #enddocregion class-1
// #docregion defaultColor
@Input() set defaultColor(colorName:string){
this._defaultColor = colorName || this._defaultColor;
}
// #enddocregion defaultColor
// #docregion class-1
constructor(private el: ElementRef, private renderer: Renderer) { } constructor(private el: ElementRef, private renderer: Renderer) { }
@ -37,7 +44,6 @@ export class Highlight {
private _highlight(color:string) { private _highlight(color:string) {
this.renderer.setElementStyle(this.el, 'background-color', color); this.renderer.setElementStyle(this.el, 'background-color', color);
} }
} }
// #enddocregion class // #enddocregion class-1
// #enddocregion full // #enddocregion full

View File

@ -8,7 +8,7 @@ include ../../../../_includes/_util-fns
* write an attribute directive to change the background color * write an attribute directive to change the background color
* apply the attribute directive to an element in a template * apply the attribute directive to an element in a template
* respond to user-initiated events * respond to user-initiated events
* pass a value into the directive using data binding * pass values into the directive using data binding
[Live Example](/resources/live-examples/attribute-directives/ts/src/plnkr.html) [Live Example](/resources/live-examples/attribute-directives/ts/src/plnkr.html)
@ -227,7 +227,7 @@ figure.image-display
Here is the final version of the class: Here is the final version of the class:
+makeExample('attribute-directives/ts/src/app/highlight.directive.ts', 'class', 'app/highlight.directive.ts (class only)') +makeExample('attribute-directives/ts/src/app/highlight.directive.ts', 'class-1', 'app/highlight.directive.ts (class only)')
:marked :marked
The new `highlightColor` property is called an "input" property because data flows from the binding expression into our directive. The new `highlightColor` property is called an "input" property because data flows from the binding expression into our directive.
Notice that we call the `@Input()` decorator function while defining the property. Notice that we call the `@Input()` decorator function while defining the property.
@ -263,7 +263,7 @@ figure.image-display
Here is the updated template: Here is the updated template:
+makeExample('attribute-directives/ts/src/app/app.component.html') +makeExample('attribute-directives/ts/src/app/app.component.html', 'v2')
.l-sub-section .l-sub-section
:marked :marked
@ -283,10 +283,41 @@ figure.image-display
While it's cool that this technique works, we recommend adding the `color` property to the `AppComponent`. While it's cool that this technique works, we recommend adding the `color` property to the `AppComponent`.
:marked :marked
Here is our final app in action. Here is our second version of the directive in action.
figure.image-display
img(src="/resources/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2")
.l-main-section
:marked
## Bind to a second property
Our directive only has a single, customizable property. What if we had ***two properties***?
Let's let the template developer set the default color, the color that prevails until the user picks a highlight color.
We'll add a second **input** property to `HighlightDirective` called `defaultColor`:
+makeExample('attribute-directives/ts/src/app/highlight.directive.ts', 'defaultColor')
:marked
The `defaultColor` property has a setter that overrides the hard-coded default color, "red".
We don't need a getter.
How do we bind to it? We already "burned" the `my-highlight` attribute name as a binding target.
Remember that a *component is a directive too*.
We can add as many component property bindings as we need by stringing them along in the template
as in this example that sets the `a`, `b`, `c` properties to the string literals 'a', 'b', and 'c'.
```
<my-component [a]="'a'" [b]="'b'" [c]="'c'"><my-component>
```
We do the same thing with an attribute directive.
+makeExample('attribute-directives/ts/src/app/app.component.html', 'defaultColor')
:marked
Here we're binding the user's color choice to the `my-highlight` attribute as we did before.
We're *also* binding the literal string, 'violet', to the `defaultColor`
(remembering to spell that property in "kebab-case" as *default-color*).
Here is the final version of the directive in action.
figure.image-display figure.image-display
img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight") img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight")
:marked
.l-main-section .l-main-section
:marked :marked
## Summary ## Summary
@ -294,7 +325,7 @@ figure.image-display
- build a simple **attribute directive** to attach behavior to an HTML element, - build a simple **attribute directive** to attach behavior to an HTML element,
- use that directive in a template, - use that directive in a template,
- respond to **events** to change behavior based on an event, - respond to **events** to change behavior based on an event,
- and use **binding** to pass a value to the attribute directive. - and use **binding** to pass values to the attribute directive.
The final source: The final source:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

After

Width:  |  Height:  |  Size: 488 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB