From 596b6862de72928d2d2d6cbf2abbdd48dee94c9b Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Thu, 11 Aug 2016 11:47:59 -0700
Subject: [PATCH] docs(template-syntax/dart): enhancements to example code
 (#2051)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../dart/lib/app_component.dart               | 42 ++++++++++++++-----
 .../dart/lib/app_component.html               | 12 ++++++
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
index 6d9199c175..26f2c82625 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart
+++ b/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,8 +143,8 @@ 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;
@@ -149,8 +152,8 @@ class AppComponent implements OnInit, AfterViewInit {
   // #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
@@ -158,6 +161,20 @@ class AppComponent implements OnInit, AfterViewInit {
   }
   // #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 --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html
index c7542c3039..5381bd4024 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.html
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html
@@ -409,6 +409,18 @@ bindon-ngModel
 <!-- 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.