docs(template-syntax/dart): enhancements to example code (#2051)

* docs(template-syntax/dart): enhancements to example code

Enhancements to `NgStyle` section in support of its API docs.
- Add feature supporting interactive update of a paragraph’s style.
- Add full type declarations.
- Replace bogus implementation of `getStyles()`.

* dartfmt updates

Author: chalin

Diff for: public/docs/_examples/template-syntax/dart/lib/app_component.dart

@@ -108,8 +108,7 @@ class AppComponent implements OnInit, AfterViewInit {
 
   bool onSave([UIEvent event = null]) {
     HtmlElement el = event?.target;
-    var evtMsg =
-        event != null ? ' Event target is ${el.innerHtml}.' : '';
+    var evtMsg = event != null ? ' Event target is ${el.innerHtml}.' : '';
     alerter('Saved. $evtMsg');
     return false;
   }
@@ -126,8 +125,12 @@ class AppComponent implements OnInit, AfterViewInit {
   }
 
   String getStyles(Element el) {
-    var showStyles = setStyles();
-    return JSON.encode(showStyles);
+    final style = el.style;
+    final Map styles = <String, String>{};
+    for (var i = 0; i < style.length; i++) {
+      styles[style.item(i)] = style.getPropertyValue(style.item(i));
+    }
+    return JSON.encode(styles);
   }
 
   Map<String, bool> _previousClasses = {};
@@ -140,24 +143,38 @@ class AppComponent implements OnInit, AfterViewInit {
     };
     // #docregion setClasses
     // compensate for DevMode (sigh)
-    if (JSON.encode(_previousClasses) ==
-        JSON.encode(classes)) return _previousClasses;
+    if (JSON.encode(_previousClasses) == JSON.encode(classes))
+      return _previousClasses;
     _previousClasses = classes;
     // #enddocregion setClasses
     return classes;
   }
   // #enddocregion setClasses
 
   // #docregion setStyles
-  Map setStyles() {
-    return {
+  Map<String, String> setStyles() {
+    return <String, String>{
       'font-style': canSave ? 'italic' : 'normal', // italic
       'font-weight': !isUnchanged ? 'bold' : 'normal', // normal
       'font-size': isSpecial ? '24px' : '8px' // 24px
     };
   }
   // #enddocregion setStyles
 
+  // #docregion NgStyle
+  bool isItalic = false;
+  bool isBold = false;
+  String fontSize = 'large';
+
+  Map<String, String> setStyle() {
+    return {
+      'font-style': isItalic ? 'italic' : 'normal',
+      'font-weight': isBold ? 'bold' : 'normal',
+      'font-size': fontSize
+    };
+  }
+  // #enddocregion NgStyle
+
   String title = 'Template Syntax';
   String toeChoice;
   String toeChooser(Element picker) {
@@ -187,13 +204,16 @@ class AppComponent implements OnInit, AfterViewInit {
   int heroesNoTrackByChangeCount = 0;
   int heroesWithTrackByChangeCount = 0;
 
-  @ViewChildren('noTrackBy') QueryList<ElementRef> childrenNoTrackBy;
-  @ViewChildren('withTrackBy') QueryList<ElementRef> childrenWithTrackBy;
+  @ViewChildren('noTrackBy')
+  QueryList<ElementRef> childrenNoTrackBy;
+  @ViewChildren('withTrackBy')
+  QueryList<ElementRef> childrenWithTrackBy;
 
   void _detectNgForTrackByEffects() {
     /// Converts [viewChildren] to a list of [Element].
     List<Element> _extractChildren(QueryList<ElementRef> viewChildren) =>
-        viewChildren.toList()[0].nativeElement.children.toList() as List<Element>;
+        viewChildren.toList()[0].nativeElement.children.toList()
+        as List<Element>;
 
     {
       // Updates 'without TrackBy' statistics.

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

@@ -409,6 +409,18 @@ <h3>Result: {{currentHero.firstName}}</h3>
 <!-- NgStyle binding -->
 <hr><h2 id="ngStyle">NgStyle Binding</h2>
 
+<!-- #docregion NgStyle -->
+<div>
+  <p [ngStyle]="setStyle()" #styleP>Change style of this text!</p>
+
+  <label>Italic: <input type="checkbox" [(ngModel)]="isItalic"></label> |
+  <label>Bold: <input type="checkbox" [(ngModel)]="isBold"></label> |
+  <label>Size: <input type="text" [(ngModel)]="fontSize"></label>
+
+  <p>Style set to: <code>'{{styleP.style.cssText}}'</code></p>
+</div>
+<!-- #enddocregion NgStyle -->
+
 <!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
   This div is x-large.