docs(template-syntax/dart): updates to match TS

public/docs/_examples/template-syntax/dart/lib/app_component.dart

@@ -7,7 +7,8 @@ import 'package:angular2/common.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
-import 'my_click_directive.dart';
+import 'click_directive.dart';
+import 'sizer_component.dart';
 
 enum Color { red, green, blue }
 
@@ -18,7 +19,8 @@ enum Color { red, green, blue }
       HeroDetailComponent,
       BigHeroDetailComponent,
       MyClickDirective,
-      MyClickDirective2
+      MyClickDirective2,
+      MySizerComponent
     ])
 class AppComponent implements OnInit, AfterViewInit {
   @override
@@ -165,6 +167,7 @@ class AppComponent implements OnInit, AfterViewInit {
   bool isItalic = false;
   bool isBold = false;
   String fontSize = 'large';
+  String fontSizePx = '14';
 
   Map<String, String> setStyle() {
     return {

public/docs/_examples/template-syntax/dart/lib/app_component.html

@@ -14,7 +14,7 @@ <h1>Template Syntax</h1>
 </div>
 <br>
 <a href="#event-binding">Event Binding</a><br>
-
+<a href="#two-way">Two-way Binding</a><br>
 <br>
 <div>Directives</div>
 <div style="margin-left:8px">
@@ -242,9 +242,6 @@ <h3>
 
   <button [attr.disabled]="!isUnchanged">Disabled as well</button>
 
-  <!-- can't remove it with [attr.disabled] either -->
-  <button disabled [attr.disabled]>Still disabled</button>
-
   <!-- we'd have to remove it with property binding -->
   <button disabled [disabled]="false">Enabled (but inert)</button>
 </div>
@@ -262,7 +259,7 @@ <h3>
 <!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [className]="badCurly">Bad curly</div>
+     [class]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -309,9 +306,9 @@ <h3>
 <div>
 <!-- #docregion event-binding-3 -->
 <!-- `myClick` is an event on the custom `MyClickDirective` -->
-<!-- #docregion my-click -->
+<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event">click with myClick</div>
-<!-- #enddocregion my-click -->
+<!-- #enddocregion myClick -->
 <!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
@@ -349,6 +346,24 @@ <h3>
 </div>
 <!-- #enddocregion event-binding-propagation -->
 <br><br>
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <!-- #docregion two-way-1 -->
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <!-- #enddocregion two-way-1 -->
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <!-- #docregion two-way-2 -->
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
+  <!-- #enddocregion two-way-2 -->
+</div>
+<br><br>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -746,7 +761,7 @@ <h4>Example Form</h4>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product['price'] | currency:'USD':false}}
+  <label>Price: </label>{{product['price'] | currency:'USD':true}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>

public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart → public/docs/_examples/template-syntax/dart/lib/click_directive.dart

@@ -5,11 +5,11 @@ import 'package:angular2/core.dart';
 
 @Directive(selector: '[myClick]')
 class MyClickDirective {
-  // #docregion my-click-output-1
+  // #docregion output-myClick
   // @Output(alias) [type info] propertyName = ...
   @Output('myClick') final EventEmitter clicks = new EventEmitter<String>();
 
-  // #enddocregion my-click-output-1
+  // #enddocregion output-myClick
   bool _toggle = false;
 
   MyClickDirective(ElementRef el) {
@@ -21,14 +21,14 @@ class MyClickDirective {
   }
 }
 
-// #docregion my-click-output-2
+// #docregion output-myClick2
 @Directive(
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
     selector: '[myClick2]',
-// #docregion my-click-output-2
+// #docregion output-myClick2
     // ...
     outputs: const ['clicks:myClick']) // propertyName:alias
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
 class MyClickDirective2 {
   final EventEmitter clicks = new EventEmitter<String>();
   bool _toggle = false;

public/docs/_examples/template-syntax/dart/lib/sizer_component.dart

@@ -0,0 +1,30 @@
+// #docregion
+import 'dart:math';
+import 'package:angular2/core.dart';
+
+@Component(
+    selector: 'my-sizer',
+    template: '''
+      <div>
+        <button (click)="dec()" title="smaller">-</button>
+        <button (click)="inc()" title="bigger">+</button>
+        <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+      </div>''')
+class MySizerComponent {
+  static final defaultPxSize = 14;
+
+  @Input()
+  String size;
+
+  @Output()
+  var sizeChange = new EventEmitter<String>();
+
+  void dec() => resize(-1);
+  void inc() => resize(1);
+
+  void resize(num delta) {
+    final numSize = num.parse(size, (_) => defaultPxSize);
+    size = min(40, max(8, numSize + delta)).toString();
+    sizeChange.emit(size);
+  }
+}

public/docs/dart/latest/guide/template-syntax.jade

@@ -48,16 +48,6 @@ block dart-type-exception-example
       In checked mode, the code above will result in a type exception: 
       `String` isn't a subtype of `Hero`.
 
-block dart-class-binding-bug
-  .callout.is-helpful
-    header Angular Issue #6901
-    :marked
-      Issue [#6901][6901] prevents us from using `[class]`. As is illustrated
-      above, in the meantime we can achieve the same effect by binding to
-      `className`.
-
-      [6901]: http://github.com/angular/angular/issues/6901
-
 block style-property-name-dart-diff
   .callout.is-helpful
     header Dart difference: Style property names