''')
class LittleTourComponent {
List heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml
index 7f4fd9f312..6c18ff599b 100644
--- a/public/docs/_examples/user-input/dart/pubspec.yaml
+++ b/public/docs/_examples/user-input/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
- angular2: 2.0.0-beta.16
+ angular2: 2.0.0-beta.17
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json
index 4ff984ba64..861e707ff1 100644
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
- "banner": "Welcome to angular.io/dart! The current Angular 2 release is beta.16. Consult the Change Log about recent enhancements, fixes, and breaking changes."
+ "banner": "Welcome to angular.io/dart! The current Angular 2 release is beta.17. Consult the Change Log about recent enhancements, fixes, and breaking changes."
},
"quickstart": {
diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade
index 784cc2ef70..6e8b96f3c3 100644
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@@ -39,7 +39,7 @@ figure.image-display
and the imports in `main.dart`.
In `pubspec.yaml`, the `platform_directives` entry lets us use
- core directives, such as the NgFor directive that we'll soon add to our app.
+ core directives, such as the `ngFor` directive that we'll soon add to our app.
In `main.dart`, importing `app_component.dart` lets us implement part
of the app in a different Dart file. The QuickStart version of `main.dart`
@@ -114,13 +114,13 @@ figure.image-display
.l-main-section
:marked
- ## Showing a list property with NgFor
+ ## Showing a list property with ***ngFor**
We want to display a list of heroes. We begin by adding a list of hero names to the component and redefine `myHero` to be the first name in the list.
+makeExample('displaying-data/dart/lib/app_component_2.dart', 'mock-heroes', 'lib/app_component.dart (excerpt)')(format=".")
:marked
- Now we use the Angular `NgFor` "repeater" directive in the template to display
+ Now we use the Angular `ngFor` "repeater" directive in the template to display
each item in the `heroes` list.
+makeExample('displaying-data/dart/lib/app_component_2.dart', 'template','lib/app_component.dart (excerpt)')(format=".")
@@ -137,15 +137,12 @@ figure.image-display
.alert.is-important
:marked
- Don't forget the leading asterisk (\*) in `*ngFor`.
-
+ Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
+ Learn more about this and `ngFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
:marked
- Notice the `#hero` in the `NgFor` double-quoted instruction.
- The `#hero` is a local template variable
-
- declaration.
- The `#` prefix declares a local variable name named `hero`.
+ Notice the `hero` in the `ngFor` double-quoted instruction;
+ it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
Angular duplicates the `
` for each item in the list, setting the `hero` variable
to the item (the hero) in the current iteration. Angular uses that variable as the
@@ -153,8 +150,8 @@ figure.image-display
.l-sub-section
:marked
- We happened to give `NgFor` a list to display.
- In fact, `NgFor` can repeat items for any [Iterable](https://api.dartlang.org/stable/dart-core/Iterable-class.html) object.
+ We happened to give `ngFor` a list to display.
+ In fact, `ngFor` can repeat items for any [Iterable](https://api.dartlang.org/stable/dart-core/Iterable-class.html) object.
:marked
Now the heroes appear in an unordered list.
@@ -215,19 +212,17 @@ figure.image-display
In our example, we'd like to display a message if we have a large number of heroes — say, more than 3.
- The Angular `NgIf` directive inserts or removes an element based on a boolean condition.
+ The Angular `ngIf` directive inserts or removes an element based on a boolean condition.
We can see it in action by adding the following paragraph at the bottom of the template:
+makeExample('displaying-data/dart/lib/app_component.dart', 'message')
.alert.is-important
:marked
- Don't forget the leading asterisk (\*) in `*ngIf`.
-
-
+ Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
+ Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
:marked
- The template expression
-
- inside the double quotes looks much like Dart, and it _is_ much like Dart.
+ The [template expression](./template-syntax.html#template-expressions) inside the double quotes
+ looks much like Dart, and it _is_ much like Dart.
When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
@@ -247,10 +242,9 @@ figure.image-display
## Summary
Now we know how to use:
- **interpolation** with double curly braces to display a component property
- - **`NgFor`** to display a list of items
+ - **`ngFor`** to display a list of items
- a Dart class to shape the **model data** for our component and display properties of that model
- - **`NgIf`** to conditionally display a chunk of HTML based on a boolean expression
-
+ - **`ngIf`** to conditionally display a chunk of HTML based on a boolean expression
Here's our final code:
diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade
index 62ebeddaa6..e78d9c19eb 100644
--- a/public/docs/dart/latest/guide/forms.jade
+++ b/public/docs/dart/latest/guide/forms.jade
@@ -28,7 +28,7 @@ include ../_util-fns
- How to display validation errors to users and enable/disable form controls
- - How to share information across controls with template local variables
+ - How to share information across controls with template reference variables
.l-main-section
:marked
@@ -246,7 +246,7 @@ figure.image-display
We maintain that list internally (in `HeroFormComponent`).
We'll add a `select` to our
- form and bind the options to the `powers` list using `NgFor`,
+ form and bind the options to the `powers` list using `ngFor`,
a technique used before in [Displaying Data](./displaying-data.html).
Add the following HTML *immediately below* the Alter Ego group.
@@ -254,7 +254,7 @@ figure.image-display
:marked
This code repeats the `