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

public/docs/_examples/attribute-directives/ts/package.json

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

public/docs/_examples/attribute-directives/ts/src/app/app.component.html

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

public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.ts

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

public/docs/ts/latest/guide/attribute-directives.jade

@@ -8,7 +8,7 @@ include ../../../../_includes/_util-fns
   * write an attribute directive to change the background color
   * apply the attribute directive to an element in a template
   * 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)
 
@@ -227,7 +227,7 @@ figure.image-display
 
   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
   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.
@@ -263,7 +263,7 @@ figure.image-display
   
   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
   :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`.
 
 :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
   img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight")
-:marked
+
 .l-main-section
 :marked
   ## Summary
@@ -294,7 +325,7 @@ figure.image-display
   - build a simple **attribute directive** to attach behavior to an HTML element,
   - use that directive in a template,
   - 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: