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 = {}; + for (var i = 0; i < style.length; i++) { + styles[style.item(i)] = style.getPropertyValue(style.item(i)); + } + return JSON.encode(styles); } Map _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 setStyles() { + return { '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 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 childrenNoTrackBy; - @ViewChildren('withTrackBy') QueryList childrenWithTrackBy; + @ViewChildren('noTrackBy') + QueryList childrenNoTrackBy; + @ViewChildren('withTrackBy') + QueryList childrenWithTrackBy; void _detectNgForTrackByEffects() { /// Converts [viewChildren] to a list of [Element]. List _extractChildren(QueryList viewChildren) => - viewChildren.toList()[0].nativeElement.children.toList() as List; + viewChildren.toList()[0].nativeElement.children.toList() + as List; { // 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

+ +
+

Change style of this text!

+ + | + | + + +

Style set to: '{{styleP.style.cssText}}'

+
+ +
This div is x-large.