docs(attribute-binding): bind to 2nd property, default-color
This commit is contained in:
parent
fb2b979928
commit
4d1571254b
|
@ -16,6 +16,6 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"live-server": "^0.8.2",
|
"live-server": "^0.8.2",
|
||||||
"typescript": "^1.6.2"
|
"typescript": "^1.7.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 -->
|
|
@ -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
|
|
@ -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 |
Loading…
Reference in New Issue