Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

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

Merged
merged 2 commits into from
Aug 11, 2016
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0004e3d
docs(template-syntax/dart): enhancements to example code
chalin Aug 8, 2016
362de13
dartfmt updates
chalin Aug 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 31 additions & 11 deletions public/docs/_examples/template-syntax/dart/lib/app_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 = {};
Expand All @@ -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) {
Expand Down Expand Up @@ -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.
Expand Down
12 changes: 12 additions & 0 deletions public/docs/_examples/template-syntax/dart/lib/app_component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down