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 b83acd4f42..aa0a29b444 100644 --- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart @@ -28,9 +28,6 @@ class AppComponent { // String badCurly = 'bad curly'; // XXX: This isn't working. String badCurly = 'bad'; // XXX: This isn't working. // List badCurly = ['bad', 'curly']; // XXX: This isn't working. - String title = 'Template Syntax'; - String toeChoice; - int val = 2; bool canSave = true; bool isActive = false; bool isSpecial = true; @@ -143,6 +140,8 @@ class AppComponent { } // #enddocregion setStyles + String title = 'Template Syntax'; + String toeChoice; String toeChooser(Element picker) { List choices = picker.children; for (var i = 0; i < choices.length; i++) { @@ -153,4 +152,51 @@ class AppComponent { } } } + + // #docregion trackByHeroes + int trackByHeroes(int index, Hero hero) { return hero.id; } + // #enddocregion trackByHeroes + + // #docregion trackById + int trackById(int index, Map item): string { return item['id']; } + // #enddocregion trackById + + int val = 2; + + + //////// Detect effects of NgForTrackBy /////////////// + int heroesNoTrackByChangeCount = 0; + int heroesWithTrackByChangeCount = 0; + /* + // Convert to Dart + @ViewChildren('noTrackBy') childrenNoTrackBy:QueryList; + @ViewChildren('withTrackBy') childrenWithTrackBy:QueryList; + + private _oldNoTrackBy:HTMLElement[]; + private _oldWithTrackBy:HTMLElement[]; + + private _detectNgForTrackByEffects() { + this._oldNoTrackBy = toArray(this.childrenNoTrackBy); + this._oldWithTrackBy = toArray(this.childrenWithTrackBy); + + this.childrenNoTrackBy.changes.subscribe((changes:any) => { + let newNoTrackBy = toArray(changes); + let isSame = this._oldNoTrackBy.every((v:any, i:number) => v === newNoTrackBy[i]); + if (!isSame) { + this._oldNoTrackBy = newNoTrackBy; + this.heroesNoTrackByChangeCount++; + } + }) + + this.childrenWithTrackBy.changes.subscribe((changes:any) => { + let newWithTrackBy = toArray(changes); + let isSame = this._oldWithTrackBy.every((v:any, i:number) => v === newWithTrackBy[i]); + if (!isSame) { + this._oldWithTrackBy = newWithTrackBy; + this.heroesWithTrackByChangeCount++; + } + }) + } + */ + /////////////////// } 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 c1995edada..e2dff3d119 100644 --- a/public/docs/_examples/template-syntax/dart/lib/app_component.html +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html @@ -1,9 +1,44 @@ - -

My First Angular Application

- + + +

Template Syntax

+Interpolation
+Mental Model
+Buttons
+Properties vs. Attributes
+
+Property Binding
+
+ Attribute Binding
+ Class Binding
+ Style Binding
+
+
+Event Binding
+ +
+
Directives
+
+ NgModel (two-way) Binding
+ NgClass Binding
+ NgStyle Binding
+ NgIf
+ NgSwitch
+ NgFor
+ +
+
+* prefix and <template>
+Template local variables
+Inputs and outputs
+Pipes
+Elvis ?.
+ -

Interpolation

+

Interpolation

My current hero is {{currentHero.firstName}}

@@ -26,9 +61,10 @@

The sum of 1 + 1 is not {{1 + 1 + getVal()}}

+top -

New Mental Model

+

New Mental Model

@@ -65,11 +101,10 @@

- -
click me
+
click me
{{clickity}}

@@ -97,8 +132,10 @@ button +top + -

Property vs. Attribute (img examples)

+

Property vs. Attribute (img examples)

@@ -109,10 +146,10 @@ button - +top -

Buttons

+

Buttons

@@ -124,9 +161,10 @@ button +top -

Property Binding

+

Property Binding

@@ -159,8 +197,10 @@ button
+top + -

Attribute Binding

+

Attribute Binding

@@ -197,12 +237,10 @@ button - - - +top -

Class Binding

+

Class Binding

@@ -229,10 +267,10 @@ button
This class binding is special too
- +top -

Style Binding

+

Style Binding

@@ -244,8 +282,10 @@ button +top + -

Event Binding

+

Event Binding

@@ -260,7 +300,7 @@ button -
click with myClick
+
click with myClick
{{clickMessage}} @@ -301,10 +341,11 @@ button

+top -

NgModel Binding

+

NgModel (two-way) Binding

Result: {{currentHero.firstName}}

@@ -339,10 +380,10 @@ bindon-ngModel (ngModelChange) = "setUpperCaseFirstName($event)"
- +top -

NgClass Binding

+

NgClass Binding

setClasses returns {{setClasses() | json}}

@@ -359,6 +400,7 @@ bindon-ngModel
Bad curly special
Curly special
+top

NgStyle Binding

@@ -384,10 +426,10 @@ bindon-ngModel - +top -

NgIf Binding

+

NgIf Binding

Hello, {{currentHero.firstName}}
@@ -402,7 +444,6 @@ bindon-ngModel - @@ -425,10 +466,10 @@ bindon-ngModel
Hide with style
- +top -

NgSwitch Binding

+

NgSwitch Binding

Eenie @@ -439,23 +480,39 @@ bindon-ngModel
-
Pick a toe
-
You picked - - - - - - - - - -
+
Pick a toe
+
+ You picked ... + + + + + + Eenie + Meanie + Miney + Moe + other + + + + + + + + + + + + +
+top + -

NgFor Binding

+

NgFor Binding

@@ -470,52 +527,126 @@ bindon-ngModel
-
+top + +

NgFor with index

+

with semi-colon separator

- -
{{i + 1}} - {{hero.fullName}}
+
{{i + 1}} - {{hero.fullName}}
-
+ +

with comma separator

+
+ +
{{i + 1}} - {{hero.fullName}}
+
+ +top + +

NgForTrackBy

+ +

First hero:

+ +

without trackBy

+
+ +
({{hero.id}}) {{hero.fullName}}
+ +
+
+ Hero DOM elements change #{{heroesNoTrackByChangeCount}} without trackBy +
+ +

with trackBy and semi-colon separator

+
+ +
({{hero.id}}) {{hero.fullName}}
+ +
+
+ Hero DOM elements change #{{heroesWithTrackByChangeCount}} with trackBy +
+ +

with trackBy and comma separator

+
+
({{hero.id}}) {{hero.fullName}}
+
+ +

with trackBy and space separator

+
+
({{hero.id}}) {{hero.fullName}}
+
+ +

with *ngForTrackBy

+
+ +
({{hero.id}}) {{hero.fullName}}
+ +
+ +

with generic trackById function

+
+ +
({{hero.id}}) {{hero.fullName}}
+ +
+ +top -

* and Template

+

* prefix and <template>

-

NgIf expansion

+

*ngIf expansion

+

*ngIf

+

expand to template = "..."

+ + + + +

expand to <template>

-

NgFor expansion

+

*ngFor expansion

+

*ngFor

+ + + + + +

expand to template = "..."

- + - +

+

expand to <template>

-