updated guide/template-syntax for dart and ts

Author: chalin

public/_includes/_util-fns.jade

@@ -21,6 +21,7 @@
 - var _an = 'an';
 
 //- TS arrays vs. Dart lists
+- var _Array = 'Array';
 - var _array = 'array';
 //- Deprecate now that we have the articles _a and _an
 - var _an_array = 'an array';
@@ -32,15 +33,18 @@
 //- Location of sample code
 - var _liveLink = 'live link';
 
+//- Other
+- var _truthy = 'truthy';
+- var _falsey = 'falsey';
 
 //- Used to prefix identifiers that are private. In Dart this will be '_'.
 - var _priv = '';
 
 //- Use to conditionally include the block that follows +ifDocsFor(...).
 //- Generally favor use of Jade named blocks instead. ifDocsFor is convenient
 //- for prose that should appear only in one language version.
-mixin ifDocsFor(lang)
-  if _docsFor.toLowerCase() === lang.toLowerCase()
+mixin ifDocsFor(langPattern)
+  if _docsFor.toLowerCase().match(langPattern.toLowerCase())
     block
 
 //- Use to map inlined (prose) TS paths into, say, Dart paths via the

public/docs/_examples/template-syntax/dart/example-config.json

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'dart:html';
 
 import 'package:angular2/core.dart';
+import 'package:angular2/common.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
@@ -40,7 +41,9 @@ class AppComponent implements OnInit, AfterViewInit {
   bool isSpecial = true;
   bool isUnchanged = true;
   bool isSelected = false;
+  final Color colorRed = Color.red;
   Color color = Color.red;
+  var colorEnum = Color;
 
   List<Hero> heroes;
   Hero currentHero;
@@ -56,7 +59,7 @@ class AppComponent implements OnInit, AfterViewInit {
   final Hero nullHero = null;
   Map product = {'name': 'frimfram', 'price': 42};
   FormElement form;
-  String clickity = '';
+  String clicked = '';
   String clickMessage = '';
   String clickMessage2 = '';
   final String iconUrl = 'assets/images/ng-logo.png';
@@ -87,14 +90,14 @@ class AppComponent implements OnInit, AfterViewInit {
 
   int getVal() => val;
 
-  void onCancel(MouseEvent event) {
-    DivElement el = event.target;
+  void onCancel(UIEvent event) {
+    HtmlElement el = event?.target;
     var evtMsg = event != null ? 'Event target is ${el.innerHtml}.' : '';
     alerter('Canceled. $evtMsg');
   }
 
-  void onClickMe(MouseEvent event) {
-    DivElement el = event.target;
+  void onClickMe(UIEvent event) {
+    HtmlElement el = event?.target;
     var evtMsg = event != null ? 'Event target class is ${el.className}.' : '';
     alerter('Click me. $evtMsg');
   }
@@ -103,9 +106,10 @@ class AppComponent implements OnInit, AfterViewInit {
     alerter('Deleted hero: ${hero?.firstName}');
   }
 
-  bool onSave([MouseEvent event = null]) {
+  bool onSave([UIEvent event = null]) {
+    HtmlElement el = event?.target;
     var evtMsg =
-        event != null ? ' Event target is ${event.target.innerHtml}.' : '';
+        event != null ? ' Event target is ${el.innerHtml}.' : '';
     alerter('Saved. $evtMsg');
     return false;
   }

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

@@ -31,11 +31,11 @@ <h1>Template Syntax</h1>
 </div>
 <br>
 <a href="#star-prefix">* prefix and &lt;template&gt;</a><br>
-<a href="#local-vars">Template local variables</a><br>
+<a href="#ref-vars">Template reference variables</a><br>
 <a href="#inputs-and-outputs">Inputs and outputs</a><br>
 <a href="#pipes">Pipes</a><br>
 <a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
-<!--<a href="#enums">Enums</a><br>-->
+<a href="#enums">Enums</a><br>
 
 <!-- Interpolation and expressions -->
 <hr><h2 id="interpolation">Interpolation</h2>
@@ -105,9 +105,9 @@ <h3>
 <!-- #docregion event-binding-syntax-1 -->
 <button (click) = "onSave()">Save</button>
 <hero-detail (deleteRequest)="deleteHero()"></hero-detail>
-<div (myClick)="clickity=$event">click me</div>
+<div (myClick)="clicked=$event">click me</div>
 <!-- #enddocregion event-binding-syntax-1 -->
-{{clickity}}
+{{clicked}}
 <br><br>
 
 <div>
@@ -184,15 +184,14 @@ <h3>
 <!-- #enddocregion property-binding-5 -->
 
 <!-- #docregion property-binding-6 -->
-  <!-- BAD! HeroDetailComponent.hero expects a Hero object,
-  not the string "currentHero".
-
-  <hero-detail hero="currentHero"></hero-detail> -->
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
 <!-- #enddocregion property-binding-6 -->
-
-<!--  In checked mode, uncommenting the hero-detail above causes this:
-    EXCEPTION: type 'String' is not a subtype of type 'Hero' of 'value'. -->
-
+<div *ngIf="false">
+<!-- #docregion property-binding-6 -->
+  <hero-detail hero="currentHero"></hero-detail>
+<!-- #enddocregion property-binding-6 -->
+</div>
 <!-- #docregion property-binding-7 -->
 <hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
 <!-- #enddocregion property-binding-7 -->
@@ -202,7 +201,7 @@ <h3>
 Property bound: <img [src]="heroImageUrl">
 
 <div>The interpolated title is {{title}}</div>
-<div [textContent]="'The [textContent] title is '+title"></div>
+<div [innerHTML]="'The [innerHTML] title is '+title"></div>
 <!-- #enddocregion property-binding-vs-interpolation -->
 
 <a class="to-toc" href="#toc">top</a>
@@ -258,9 +257,7 @@ <h3>
 <!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [class]="badCurly">Bad curly</div>
-<p><b>Note:</b> "Bad curly" should be smaller but isn't, due to
-  <a href="http://github.com/angular/angular/issues/6901">issue #6901</a>.</p>
+     [className]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -374,15 +371,15 @@ <h3>Result: {{currentHero.firstName}}</h3>
 <br>
 <!-- #docregion NgModel-3 -->
 <input
-    [ngModel]="currentHero.firstName"
-    (ngModelChange)="currentHero.firstName=$event">
+  [ngModel]="currentHero.firstName"
+  (ngModelChange)="currentHero.firstName=$event">
 <!-- #enddocregion NgModel-3 -->
 (ngModelChange) = "...firstName=$event"
 <br>
 <!-- #docregion NgModel-4 -->
 <input
-    [ngModel]="currentHero.firstName"
-    (ngModelChange)="setUpperCaseFirstName($event)">
+  [ngModel]="currentHero.firstName"
+  (ngModelChange)="setUpperCaseFirstName($event)">
 <!-- #enddocregion NgModel-4 -->
 (ngModelChange) = "setUpperCaseFirstName($event)"
 <br>
@@ -443,7 +440,7 @@ <h3>Use setStyles() - CSS property names</h3>
 <!-- #enddocregion NgIf-1 -->
 
 <!-- #docregion NgIf-2 -->
-<!-- not displayed because nullHero is false.
+<!-- because of the ngIf guard
     `nullHero.firstName` never has a chance to fail -->
 <div *ngIf="nullHero != null">Hello, {{nullHero.firstName}}</div>
 
@@ -487,33 +484,33 @@ <h3>Use setStyles() - CSS property names</h3>
 </fieldset>
 
 <div class="toe">
-    <div *ngIf="toeChoice == null">Pick a toe</div>
-    <div *ngIf="toeChoice != null">
-      You picked ...
-      <!-- #docregion NgSwitch, NgSwitch-expanded -->
-      <span [ngSwitch]="toeChoice">
+  <div *ngIf="toeChoice == null">Pick a toe</div>
+  <div *ngIf="toeChoice != null">
+    You picked ...
+    <!-- #docregion NgSwitch, NgSwitch-expanded -->
+    <span [ngSwitch]="toeChoice">
       <!-- #enddocregion NgSwitch -->
 
-        <!-- with *NgSwitch -->
-        <!-- #docregion NgSwitch -->
-        <span *ngSwitchWhen="'Eenie'">Eenie</span>
-        <span *ngSwitchWhen="'Meanie'">Meanie</span>
-        <span *ngSwitchWhen="'Miney'">Miney</span>
-        <span *ngSwitchWhen="'Moe'">Moe</span>
-        <span *ngSwitchDefault>other</span>
-        <!-- #enddocregion NgSwitch -->
-
-        <!-- with <template> -->
-        <template ngSwitchWhen="Eenie"><span>Eenie</span></template>
-        <template ngSwitchWhen="Meanie"><span>Meanie</span></template>
-        <template ngSwitchWhen="Miney"><span>Miney</span></template>
-        <template ngSwitchWhen="Moe"><span>Moe</span></template>
-        <template ngSwitchDefault><span>other</span></template>
+      <!-- with *NgSwitch -->
+      <!-- #docregion NgSwitch -->
+      <span *ngSwitchWhen="'Eenie'">Eenie</span>
+      <span *ngSwitchWhen="'Meanie'">Meanie</span>
+      <span *ngSwitchWhen="'Miney'">Miney</span>
+      <span *ngSwitchWhen="'Moe'">Moe</span>
+      <span *ngSwitchDefault>other</span>
+      <!-- #enddocregion NgSwitch -->
+
+      <!-- with <template> -->
+      <template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template>
+      <template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template>
+      <template [ngSwitchWhen]="'Miney'"><span>Miney</span></template>
+      <template [ngSwitchWhen]="'Moe'"><span>Moe</span></template>
+      <template ngSwitchDefault><span>other</span></template>
 
       <!-- #docregion NgSwitch -->
-      </span>
-      <!-- #enddocregion NgSwitch, NgSwitch-expanded -->
-    </div>
+    </span>
+    <!-- #enddocregion NgSwitch, NgSwitch-expanded -->
+  </div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -620,7 +617,7 @@ <h3>*ngIf expansion</h3>
 <p><i>expand to &lt;template&gt;</i></p>
 <!-- #docregion Template-2 -->
 <template [ngIf]="currentHero != null">
-    <hero-detail [hero]="currentHero"></hero-detail>
+  <hero-detail [hero]="currentHero"></hero-detail>
 </template>
 <!-- #enddocregion Template-2 -->
 
@@ -644,15 +641,15 @@ <h3>*ngFor expansion</h3>
   <!-- ngFor w/ hero-detail Component inside a template element -->
   <!-- #docregion Template-4 -->
   <template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
-      <hero-detail [hero]="hero"></hero-detail>
+    <hero-detail [hero]="hero"></hero-detail>
   </template>
   <!-- #enddocregion Template-4 -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
 
-<!-- template local variable -->
-<hr><h2 id="local-vars">Template local variables</h2>
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
 
 <!-- #docregion ref-phone -->
 <!-- phone refers to the input element; pass its `value` to an event handler -->
@@ -672,7 +669,7 @@ <h4>Example Form</h4>
   <div class="form-group">
     <label for="name">Name</label>
     <input class="form-control" required ngControl="firstName"
-        [(ngModel)]="currentHero.firstName">
+      [(ngModel)]="currentHero.firstName">
   </div>
 <!-- #docregion ref-form-a -->
   <button type="submit" [disabled]="!theForm.form.valid">Submit</button>
@@ -682,7 +679,7 @@ <h4>Example Form</h4>
 <br><br>
 
 <!-- btn refers to the button element; show its disabled state -->
-<button #btn disabled [textContent]="'disabled by attribute: ' + btn.disabled.toString()"></button>
+<button #btn disabled [innerHTML]="'disabled by attribute: ' + btn.disabled.toString()"></button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -708,13 +705,15 @@ <h4>Example Form</h4>
 <hr><h2 id="pipes">Pipes</h2>
 
 <!-- #docregion pipes-1 -->
-<!-- Force title to uppercase -->
-<div>{{ title | uppercase }}</div>
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
 <!-- #enddocregion pipes-1 -->
 
 <!-- #docregion pipes-2 -->
-<!-- Pipe chaining: force title to uppercase, then to lowercase -->
-<div>{{ title | uppercase | lowercase }}</div>
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
 <!-- #enddocregion pipes-2 -->
 
 <!-- #docregion pipes-3 -->
@@ -723,16 +722,14 @@ <h4>Example Form</h4>
 <!-- #enddocregion pipes-3 -->
 
 <!-- #docregion pipes-json -->
-<!-- We don't suggest using json for debugging; you'd probably use toString() instead.
-     Is there a good use for the json pipe in Dart? -->
-<!--<div>{{currentHero | json}}</div>-->
+<div>{{currentHero}}</div>
 <!-- #enddocregion pipes-json -->
 
 <div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product['price'] | currency:'$'}}
+  <label>Price: </label>{{product['price'] | currency:'USD':false}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -742,7 +739,7 @@ <h4>Example Form</h4>
 
 <div>
   <!-- #docregion safe-1 -->
-  The title is {{ title }}
+  The title is {{title}}
   <!-- #enddocregion safe-1 -->
 </div>
 
@@ -759,11 +756,10 @@ <h4>Example Form</h4>
 </div>
 
 
-
 <!--
 The null hero's name is {{nullHero.firstName}}
 
-  See console log:
+See console log:
   EXCEPTION: The null object does not have a getter 'firstName'.
 -->
 
@@ -784,19 +780,16 @@ <h4>Example Form</h4>
 
 <a class="to-toc" href="#toc">top</a>
 
-<!-- Todo: discuss this in the Style binding section -->
+<!-- TODO: discuss this in the Style binding section -->
 <!-- enums in bindings -->
-
 <hr><h2 id="enums">Enums in binding</h2>
 
-<!--<p>The name of the Color.red enum is {{color}}</p>-->
-<p>The current color number is {{color}}</p>
-<p><button [style.color]="color.toString()" (click)="colorToggle()">Enum Toggle</button>
-
-<a class="to-toc" href="#toc">top</a>
-
-<!-- #docregion my-first-app -->
-<h3>My First Angular Application</h3>
-<!-- #enddocregion my-first-app -->
+<p>
+  <!-- #docregion enums -->
+  The name of the Color.red enum is {{colorRed}}.<br>
+  The current color is {{color}} and its index is {{color.index}}.<br>
+  <button [style.color]="color.toString()" (click)="colorToggle()">Enum Toggle</button>
+  <!-- #enddocregion enums -->
+</p>
 
 <a class="to-toc" href="#toc">top</a>