docs(template-syntax): publish Dart version, tweak TypeScript version
closes #875
This commit is contained in:
Kathy Walrath
parent
3bedd33814
commit
e725136d98
@ -33,11 +33,7 @@ class AppComponent implements OnInit, AfterViewInit {
|
|||||||
String heroName;
|
String heroName;
|
||||||
String help;
|
String help;
|
||||||
String actionName = 'Go for it';
|
String actionName = 'Go for it';
|
||||||
// String badCurly = 'special'; // XXX: This isn't working.
|
String badCurly = 'bad curly';
|
||||||
// String badCurly = 'bad, curly'; // XXX: This isn't working.
|
|
||||||
// String badCurly = 'bad curly'; // XXX: This isn't working.
|
|
||||||
String badCurly = 'bad'; // XXX: This isn't working.
|
|
||||||
// List<String> badCurly = ['bad', 'curly']; // XXX: This isn't working.
|
|
||||||
String classes = 'special';
|
String classes = 'special';
|
||||||
bool canSave = true;
|
bool canSave = true;
|
||||||
bool isActive = false;
|
bool isActive = false;
|
||||||
|
|||||||
@ -184,17 +184,15 @@ button</button>
|
|||||||
<!-- #enddocregion property-binding-5 -->
|
<!-- #enddocregion property-binding-5 -->
|
||||||
|
|
||||||
<!-- #docregion property-binding-6 -->
|
<!-- #docregion property-binding-6 -->
|
||||||
<!--
|
<!-- BAD! HeroDetailComponent.hero expects a Hero object,
|
||||||
BAD!
|
not the string "currentHero".
|
||||||
HeroDetailComponent.hero expects a Hero object,
|
|
||||||
not the string "currentHero"
|
|
||||||
|
|
||||||
<hero-detail hero="currentHero"></hero-detail>
|
<hero-detail hero="currentHero"></hero-detail> -->
|
||||||
|
|
||||||
In checked mode, uncommenting the hero-detail above causes this:
|
|
||||||
EXCEPTION: type 'String' is not a subtype of type 'Hero' of 'value'. -->
|
|
||||||
<!-- #enddocregion property-binding-6 -->
|
<!-- #enddocregion property-binding-6 -->
|
||||||
|
|
||||||
|
<!-- In checked mode, uncommenting the hero-detail above causes this:
|
||||||
|
EXCEPTION: type 'String' is not a subtype of type 'Hero' of 'value'. -->
|
||||||
|
|
||||||
<!-- #docregion property-binding-7 -->
|
<!-- #docregion property-binding-7 -->
|
||||||
<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
|
<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
|
||||||
<!-- #enddocregion property-binding-7 -->
|
<!-- #enddocregion property-binding-7 -->
|
||||||
@ -260,8 +258,8 @@ Property bound: <img [src]="heroImageUrl">
|
|||||||
<!-- #docregion class-binding-2 -->
|
<!-- #docregion class-binding-2 -->
|
||||||
<!-- reset/override all class names with a binding -->
|
<!-- reset/override all class names with a binding -->
|
||||||
<div class="bad curly special"
|
<div class="bad curly special"
|
||||||
[class]="badCurly">Bad curly</div> <!-- Doesn't work, due to
|
[class]="badCurly">Bad curly</div>
|
||||||
github.com/angular/angular/issues/6901 -->
|
<!-- Doesn't work, due to github.com/angular/angular/issues/6901 -->
|
||||||
<!-- #enddocregion class-binding-2 -->
|
<!-- #enddocregion class-binding-2 -->
|
||||||
|
|
||||||
<!-- #docregion class-binding-3 -->
|
<!-- #docregion class-binding-3 -->
|
||||||
@ -493,16 +491,16 @@ bindon-ngModel
|
|||||||
You picked ...
|
You picked ...
|
||||||
<!-- #docregion NgSwitch, NgSwitch-expanded -->
|
<!-- #docregion NgSwitch, NgSwitch-expanded -->
|
||||||
<span [ngSwitch]="toeChoice">
|
<span [ngSwitch]="toeChoice">
|
||||||
<!-- #enddocregion NgSwitch -->
|
<!-- #enddocregion NgSwitch -->
|
||||||
|
|
||||||
<!-- with *NgSwitch -->
|
<!-- with *NgSwitch -->
|
||||||
<!-- #docregion NgSwitch -->
|
<!-- #docregion NgSwitch -->
|
||||||
<span *ngSwitchWhen="'Eenie'">Eenie</span>
|
<span *ngSwitchWhen="'Eenie'">Eenie</span>
|
||||||
<span *ngSwitchWhen="'Meanie'">Meanie</span>
|
<span *ngSwitchWhen="'Meanie'">Meanie</span>
|
||||||
<span *ngSwitchWhen="'Miney'">Miney</span>
|
<span *ngSwitchWhen="'Miney'">Miney</span>
|
||||||
<span *ngSwitchWhen="'Moe'">Moe</span>
|
<span *ngSwitchWhen="'Moe'">Moe</span>
|
||||||
<span *ngSwitchDefault>other</span>
|
<span *ngSwitchDefault>other</span>
|
||||||
<!-- #enddocregion NgSwitch -->
|
<!-- #enddocregion NgSwitch -->
|
||||||
|
|
||||||
<!-- with <template> -->
|
<!-- with <template> -->
|
||||||
<template ngSwitchWhen="Eenie"><span>Eenie</span></template>
|
<template ngSwitchWhen="Eenie"><span>Eenie</span></template>
|
||||||
@ -511,7 +509,7 @@ bindon-ngModel
|
|||||||
<template ngSwitchWhen="Moe"><span>Moe</span></template>
|
<template ngSwitchWhen="Moe"><span>Moe</span></template>
|
||||||
<template ngSwitchDefault><span>other</span></template>
|
<template ngSwitchDefault><span>other</span></template>
|
||||||
|
|
||||||
<!-- #docregion NgSwitch -->
|
<!-- #docregion NgSwitch -->
|
||||||
</span>
|
</span>
|
||||||
<!-- #enddocregion NgSwitch, NgSwitch-expanded -->
|
<!-- #enddocregion NgSwitch, NgSwitch-expanded -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,412 +0,0 @@
|
|||||||
include ../../../../_includes/_util-fns
|
|
||||||
|
|
||||||
+includeShared('{ts}', 'intro')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'html-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'my-first-app')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'html-2')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'first-interpolation')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'title+image')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'sum-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'sum-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-5')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-1')
|
|
||||||
:marked
|
|
||||||
We write template expressions in a language that looks like Dart.
|
|
||||||
Many Dart expressions are legal template expressions, but not all.
|
|
||||||
Dart expressions that have or promote side effects are prohibited,
|
|
||||||
including: **[QUESTION: is this list correct? I removed mentions of chaining with , and ;.]**
|
|
||||||
|
|
||||||
* assignments (`=`, `+=`, `-=`, ...)
|
|
||||||
* creating instances using `new` or `const`
|
|
||||||
* increment and decrement (`++` and `--`)
|
|
||||||
|
|
||||||
Other notable differences from Dart syntax include:
|
|
||||||
**[QUESTION: I wasn't able to use Dart interpolation inside a String,
|
|
||||||
which I had just assumed would work. How should we talk about that?
|
|
||||||
What else isn't allowed?]**
|
|
||||||
|
|
||||||
* no support for the bitwise operators `|` and `&`
|
|
||||||
* new [template expression operators](#expression-operators), such as `|`
|
|
||||||
.callout.is-helpful
|
|
||||||
header Dart difference: Template expression operators
|
|
||||||
:marked
|
|
||||||
[PENDING: say something about stuff you might find in a24ts template expressions
|
|
||||||
but not in dart template expressions, and vice versa.]
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-context')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-guidelines')
|
|
||||||
:marked
|
|
||||||
Dependent values should not change during a single turn of the event loop.
|
|
||||||
If an idempotent expression returns a string or a number, it returns the same string or number
|
|
||||||
when called twice in a row. If the expression returns an object (including a `DateTime`, `Map`, or `List`),
|
|
||||||
it returns the same object *reference* when called twice in a row.
|
|
||||||
|
|
||||||
.callout.is-helpful
|
|
||||||
header Dart difference: Arrays are lists
|
|
||||||
:marked
|
|
||||||
Arrays in JavaScript correspond to lists in Dart
|
|
||||||
(instances of the `List` class).
|
|
||||||
This chapter uses _array_ and _list_ interchangeably.
|
|
||||||
For more information, see
|
|
||||||
[Lists](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#lists)
|
|
||||||
in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html).
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-statements-1')
|
|
||||||
:marked
|
|
||||||
Like template expressions, template *statements* use a language that looks like Dart.
|
|
||||||
The template statement parser is different than the template expression parser and
|
|
||||||
specifically supports both basic assignment (`=`) and chaining expressions with semicolons (`;`) and commas (`,`).
|
|
||||||
**[QUESTION: is that true — would `,` really work? is "chaining" really the word we want to use?]**
|
|
||||||
|
|
||||||
However, certain Dart syntax is not allowed:
|
|
||||||
* the `new` and `const` keywords **[QUESTION: I guessed about `const`. Is it true?]**
|
|
||||||
* increment and decrement operators, `++` and `--`
|
|
||||||
* operator assignment, such as `+=` and `-=`
|
|
||||||
* the bitwise operators `|` and `&`
|
|
||||||
* the [template expression operators](#expression-operators)
|
|
||||||
**[QUESTION: can you really not use `?.`?]**
|
|
||||||
|
|
||||||
.callout.is-helpful
|
|
||||||
header Dart difference: Template statement operators
|
|
||||||
:marked
|
|
||||||
[PENDING: say something about stuff you might find in a24ts statements
|
|
||||||
but not in dart statements, and vice versa.]
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-statements-3')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'img+button')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'hero-detail-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'disabled-button-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-4')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-attribute-vs-property')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-5')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-world-without-attributes')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-targets')
|
|
||||||
|
|
||||||
<div width="90%">
|
|
||||||
table
|
|
||||||
tr
|
|
||||||
th Binding type
|
|
||||||
th Target
|
|
||||||
th Examples
|
|
||||||
tr
|
|
||||||
td Property
|
|
||||||
td.
|
|
||||||
Element property<br>
|
|
||||||
Component property<br>
|
|
||||||
Directive property
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-syntax-1')(format=".")
|
|
||||||
tr
|
|
||||||
td Event
|
|
||||||
td.
|
|
||||||
Element event<br>
|
|
||||||
Component event<br>
|
|
||||||
Directive event
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-syntax-1')(format=".")
|
|
||||||
tr
|
|
||||||
td Two-way
|
|
||||||
td.
|
|
||||||
Event and property
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', '2-way-binding-syntax-1')(format=".")
|
|
||||||
tr
|
|
||||||
td Attribute
|
|
||||||
td.
|
|
||||||
Attribute
|
|
||||||
(the exception)
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'attribute-binding-syntax-1')(format=".")
|
|
||||||
tr
|
|
||||||
td Class
|
|
||||||
td.
|
|
||||||
<code>class</code> property
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-syntax-1')(format=".")
|
|
||||||
tr
|
|
||||||
td Style
|
|
||||||
td.
|
|
||||||
<code>style</code> property
|
|
||||||
td
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-syntax-1')(format=".")
|
|
||||||
</div>
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-end')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-5')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-6')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-7')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-8')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-5')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-9')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-10')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-11')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-6')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-12')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-7')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-13')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-vs-interpolation')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-14')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-1')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-colspan')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-aria')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-2')(format=".")
|
|
||||||
//
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-3')
|
|
||||||
:marked
|
|
||||||
Finally, we can bind to a specific class name.
|
|
||||||
Angular adds the class when the template expression evaluates to `true`.
|
|
||||||
It removes the class when the expression evaluates to `false`.
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-4')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-3')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-5')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-6')
|
|
||||||
+makeExample('template-syntax/dart/lib/hero_detail_component.dart',
|
|
||||||
'template-1', 'HeroDetailComponent.ts (template)')(format=".")
|
|
||||||
+makeExample('template-syntax/dart/lib/hero_detail_component.dart',
|
|
||||||
'deleteRequest', 'HeroDetailComponent.ts (delete logic)')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-7')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-to-component')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-8')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-5')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-6')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-4')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-7')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-2')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3a')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.dart', 'setClasses')(format=".")
|
|
||||||
// PENDING: Add "Dart difference" for returning maps in Dart? for omitting unnecessary `this.`s?
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgClass-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.dart', 'setStyles')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-2')(format=".")
|
|
||||||
//
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-1')
|
|
||||||
<a id="ngIf"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
### NgIf
|
|
||||||
We can add an element subtree (an element and its children) to the DOM by binding an `NgIf` directive to a `true` expression.
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-2')
|
|
||||||
//
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-3')
|
|
||||||
:marked
|
|
||||||
Binding to a false expression removes the element subtree from the DOM.
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-2')(format=".")
|
|
||||||
.callout.is-helpful
|
|
||||||
header Dart difference: No truthy values
|
|
||||||
:marked
|
|
||||||
In checked mode, Dart expects Boolean values
|
|
||||||
(those with type `bool`) to be either `true` or `false`.
|
|
||||||
Even in production mode, the only value Dart treats as `true` is
|
|
||||||
the value `true`; all other values are `false`.
|
|
||||||
TypeScript and JavaScript, on the other hand, treat
|
|
||||||
many values (including non-null objects) as true.
|
|
||||||
A TypeScript Angular 2 program, for example, often has code like
|
|
||||||
`*ngIf="currentHero"` where a Dart program has code like
|
|
||||||
`*ngIf="currentHero != null"`.
|
|
||||||
|
|
||||||
When converting TypeScript code to Dart code, watch out for
|
|
||||||
true/false problems. For example, forgetting the `!= null`
|
|
||||||
can lead to error messages such as
|
|
||||||
"[TODO: Put error message here]".
|
|
||||||
For more information, see
|
|
||||||
[Booleans](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#booleans)
|
|
||||||
in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html).
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-5')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngSwitch-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngSwitch-2')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-3')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-4')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-5')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-6')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-7')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.dart', 'trackByHeroes')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgForTrackBy-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-3')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-2a')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-2a')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-3')
|
|
||||||
// Changed from RED to ORANGE, since this isn't so dire a situation in Dart.
|
|
||||||
.callout.is-important
|
|
||||||
header Remember the brackets!
|
|
||||||
:marked
|
|
||||||
Don’t make the mistake of writing `ngIf="currentHero"`!
|
|
||||||
That syntax assigns the *string* value "currentHero" to `ngIf`,
|
|
||||||
which won't work because `ngIf` expects a bool. **[QUESTION: Did I get that right?]**
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngSwitch-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch-expanded')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngSwitch-2')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-3a')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-3')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-4')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-2')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-refs')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-phone')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-value')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form-a')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-3')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'io-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'io-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-1')(format=".")
|
|
||||||
:marked
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Alternatively, we can identify members in the `inputs` and `outputs` arrays
|
|
||||||
of the directive metadata, as in this example:
|
|
||||||
+makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-2')(format=".")
|
|
||||||
<br>
|
|
||||||
:marked
|
|
||||||
We can specify an input/output property either with a decorator or in a metadata array.
|
|
||||||
Don't do both!
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-4')
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-5')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'my-click')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-6')
|
|
||||||
+makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-1')(format=".")
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
We can also alias property names in the `inputs` and `outputs` arrays.
|
|
||||||
We write a colon-delimited (`:`) string with
|
|
||||||
the directive property name on the *left* and the public alias on the *right*:
|
|
||||||
+makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-2')(format=".")
|
|
||||||
|
|
||||||
<a id="expression-operators"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Template expression operators
|
|
||||||
The template expression language employs a subset of Dart syntax supplemented with a few special operators
|
|
||||||
for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_.
|
|
||||||
.callout.is-helpful
|
|
||||||
header Dart difference: ?. is a Dart operator
|
|
||||||
:marked
|
|
||||||
The Elvis operator (`?.`) is part of the Dart language.
|
|
||||||
It's considered a template expression operator because
|
|
||||||
Angular 2 supports `?.` even in TypeScript and JavaScript apps.
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-3')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-3')(format=".")
|
|
||||||
//
|
|
||||||
NOTE: Intentionally omit discussion of the json pipe.
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-4')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-json')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-1')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-2')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-2')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-1')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-3')
|
|
||||||
// +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-4')
|
|
||||||
:marked
|
|
||||||
Dart throws an exception, and so does Angular:
|
|
||||||
code-example(format="" language="html").
|
|
||||||
EXCEPTION: The null object does not have a getter 'firstName'.
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-5')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-4')(format=".")
|
|
||||||
|
|
||||||
//
|
|
||||||
NOTE: Intentionally skip ugly null checking you wouldn't do in Dart.
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-6')
|
|
||||||
+make---dashed-so-does-not-show-as-fragment-error---Example('template-syntax/dart/lib/app_component.html', 'elvis-5')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-7')
|
|
||||||
:marked
|
|
||||||
This approach has merit but can be cumbersome, especially if the property path is long.
|
|
||||||
Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-8')
|
|
||||||
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-6')(format=".")
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-9')
|
|
||||||
|
|
||||||
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'summary')
|
|
||||||
@ -1,12 +1,410 @@
|
|||||||
include ../../../../_includes/_util-fns
|
include ../../../../_includes/_util-fns
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'intro')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We're working on the Dart version of this chapter.
|
The complete source code for the example app in this chapter is
|
||||||
In the meantime, please see these resources:
|
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/template-syntax/dart).
|
||||||
|
|
||||||
* [Template Syntax](/docs/ts/latest/guide/template-syntax.html):
|
+includeShared('{ts}', 'html-1')
|
||||||
The TypeScript version of this chapter
|
+makeExample('template-syntax/dart/lib/app_component.html', 'my-first-app')(format=".")
|
||||||
|
+includeShared('{ts}', 'html-2')
|
||||||
|
|
||||||
* [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/template-syntax/dart):
|
+includeShared('{ts}', 'interpolation-1')
|
||||||
A preliminary version of the example code that will appear in this chapter
|
+makeExample('template-syntax/dart/lib/app_component.html', 'first-interpolation')(format=".")
|
||||||
|
+includeShared('{ts}', 'interpolation-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'title+image')(format=".")
|
||||||
|
+includeShared('{ts}', 'interpolation-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'sum-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'interpolation-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'sum-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'interpolation-5')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'template-expressions-1')
|
||||||
|
:marked
|
||||||
|
We write template expressions in a language that looks like Dart.
|
||||||
|
Many Dart expressions are legal template expressions, but not all.
|
||||||
|
Dart expressions that have or promote side effects are prohibited,
|
||||||
|
including:
|
||||||
|
|
||||||
|
* assignments (`=`, `+=`, `-=`, ...)
|
||||||
|
* creating instances using `new` or `const`
|
||||||
|
* increment and decrement (`++` and `--`)
|
||||||
|
|
||||||
|
Other notable differences from Dart syntax include:
|
||||||
|
|
||||||
|
* no support for Dart string interpolation; for example,
|
||||||
|
instead of `"'The title is $title'"`, you must use
|
||||||
|
`"'The title is ' + title"`
|
||||||
|
* no support for the bitwise operators `|` and `&`
|
||||||
|
* new [template expression operators](#expression-operators), such as `|`
|
||||||
|
+includeShared('{ts}', 'template-expressions-context')
|
||||||
|
+includeShared('{ts}', 'template-expressions-guidelines')
|
||||||
|
:marked
|
||||||
|
Dependent values should not change during a single turn of the event loop.
|
||||||
|
If an idempotent expression returns a string or a number, it returns the same string or number
|
||||||
|
when called twice in a row. If the expression returns an object (including a `DateTime`, `Map`, or `List`),
|
||||||
|
it returns the same object *reference* when called twice in a row.
|
||||||
|
|
||||||
|
.callout.is-helpful
|
||||||
|
header Dart difference: Arrays are lists
|
||||||
|
:marked
|
||||||
|
Arrays in JavaScript correspond to lists in Dart
|
||||||
|
(instances of the `List` class).
|
||||||
|
This chapter uses _array_ and _list_ interchangeably.
|
||||||
|
For more information, see
|
||||||
|
[Lists](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#lists)
|
||||||
|
in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html).
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'template-statements-1')
|
||||||
|
:marked
|
||||||
|
Like template expressions, template *statements* use a language that looks like Dart.
|
||||||
|
The template statement parser is different than the template expression parser and
|
||||||
|
specifically supports both basic assignment (`=`) and chaining expressions with semicolons (`;`).
|
||||||
|
|
||||||
|
However, certain Dart syntax is not allowed:
|
||||||
|
* the `new` and `const` keywords
|
||||||
|
* increment and decrement operators, `++` and `--`
|
||||||
|
* operator assignment, such as `+=` and `-=`
|
||||||
|
* the operators `|` and `&` (neither for bitwise operations
|
||||||
|
nor for the Angular [pipe operator](#the-pipe-operator-))
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'template-statements-3')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'binding-syntax-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'img+button')(format=".")
|
||||||
|
+includeShared('{ts}', 'binding-syntax-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'hero-detail-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'binding-syntax-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'disabled-button-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'binding-syntax-4')
|
||||||
|
+includeShared('{ts}', 'binding-syntax-attribute-vs-property')
|
||||||
|
+includeShared('{ts}', 'binding-syntax-5')
|
||||||
|
+includeShared('{ts}', 'binding-syntax-world-without-attributes')
|
||||||
|
+includeShared('{ts}', 'binding-syntax-targets')
|
||||||
|
|
||||||
|
<div width="90%">
|
||||||
|
table
|
||||||
|
tr
|
||||||
|
th Binding type
|
||||||
|
th Target
|
||||||
|
th Examples
|
||||||
|
tr
|
||||||
|
td Property
|
||||||
|
td.
|
||||||
|
Element property<br>
|
||||||
|
Component property<br>
|
||||||
|
Directive property
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-syntax-1')(format=".")
|
||||||
|
tr
|
||||||
|
td Event
|
||||||
|
td.
|
||||||
|
Element event<br>
|
||||||
|
Component event<br>
|
||||||
|
Directive event
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-syntax-1')(format=".")
|
||||||
|
tr
|
||||||
|
td Two-way
|
||||||
|
td.
|
||||||
|
Event and property
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', '2-way-binding-syntax-1')(format=".")
|
||||||
|
tr
|
||||||
|
td Attribute
|
||||||
|
td.
|
||||||
|
Attribute
|
||||||
|
(the exception)
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'attribute-binding-syntax-1')(format=".")
|
||||||
|
tr
|
||||||
|
td Class
|
||||||
|
td.
|
||||||
|
<code>class</code> property
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-syntax-1')(format=".")
|
||||||
|
tr
|
||||||
|
td Style
|
||||||
|
td.
|
||||||
|
<code>style</code> property
|
||||||
|
td
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-syntax-1')(format=".")
|
||||||
|
</div>
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'binding-syntax-end')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'property-binding-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-5')
|
||||||
|
+includeShared('{ts}', 'property-binding-6')
|
||||||
|
+includeShared('{ts}', 'property-binding-7')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-8')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-5')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-9')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-10')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-11')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-6')(format=".")
|
||||||
|
.callout.is-helpful
|
||||||
|
header Dart difference: Type exceptions
|
||||||
|
:marked
|
||||||
|
In checked mode, uncommenting the `<hero-detail>` element above causes a type exception,
|
||||||
|
because `String` isn't a subtype of `Hero`.
|
||||||
|
For information on checked mode, see [Important concepts](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#important-concepts)
|
||||||
|
in the Dart language tour.
|
||||||
|
+includeShared('{ts}', 'property-binding-12')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-7')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-13')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-vs-interpolation')(format=".")
|
||||||
|
+includeShared('{ts}', 'property-binding-14')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'other-bindings-1')
|
||||||
|
+includeShared('{ts}', 'other-bindings-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-colspan')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-aria')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-class-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-class-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-2')(format=".")
|
||||||
|
//
|
||||||
|
+includeShared('{ts}', 'other-bindings-class-3')
|
||||||
|
:marked
|
||||||
|
Finally, we can bind to a specific class name.
|
||||||
|
Angular adds the class when the template expression evaluates to `true`.
|
||||||
|
It removes the class when the expression evaluates to `false`.
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-class-4')
|
||||||
|
+includeShared('{ts}', 'other-bindings-style-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-style-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'other-bindings-style-3')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'event-binding-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-5')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-6')
|
||||||
|
+makeExample('template-syntax/dart/lib/hero_detail_component.dart',
|
||||||
|
'template-1', 'HeroDetailComponent.ts (template)')(format=".")
|
||||||
|
+makeExample('template-syntax/dart/lib/hero_detail_component.dart',
|
||||||
|
'deleteRequest', 'HeroDetailComponent.ts (delete logic)')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-7')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-to-component')(format=".")
|
||||||
|
+includeShared('{ts}', 'event-binding-8')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'ngModel-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-5')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-6')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-4')(format=".")
|
||||||
|
+includeShared('{ts}', 'ngModel-7')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'directives-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-2')
|
||||||
|
+includeShared('{ts}', 'directives-ngClass-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3a')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngClass-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.dart', 'setClasses')(format=".")
|
||||||
|
// PENDING: Add "Dart difference" for returning maps in Dart? for omitting unnecessary `this.`s?
|
||||||
|
+includeShared('{ts}', 'directives-ngClass-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgClass-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngStyle-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngStyle-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.dart', 'setStyles')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngStyle-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-2')(format=".")
|
||||||
|
//
|
||||||
|
+includeShared('{ts}', 'directives-ngIf-1')
|
||||||
|
<a id="ngIf"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
### NgIf
|
||||||
|
We can add an element subtree (an element and its children) to the DOM by binding an `NgIf` directive to a `true` expression.
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngIf-2')
|
||||||
|
//
|
||||||
|
+includeShared('{ts}', 'directives-ngIf-3')
|
||||||
|
:marked
|
||||||
|
Binding to a false expression removes the element subtree from the DOM.
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-2')(format=".")
|
||||||
|
.callout.is-helpful
|
||||||
|
header Dart difference: No truthy values
|
||||||
|
:marked
|
||||||
|
In checked mode, Dart expects Boolean values
|
||||||
|
(those with type `bool`) to be either `true` or `false`.
|
||||||
|
Even in production mode, the only value Dart treats as `true` is
|
||||||
|
the value `true`; all other values are `false`.
|
||||||
|
TypeScript and JavaScript, on the other hand, treat
|
||||||
|
many values (including non-null objects) as true.
|
||||||
|
A TypeScript Angular 2 program, for example, often has code like
|
||||||
|
`*ngIf="currentHero"` where a Dart program has code like
|
||||||
|
`*ngIf="currentHero != null"`.
|
||||||
|
|
||||||
|
When converting TypeScript code to Dart code, watch out for
|
||||||
|
true/false problems. For example, forgetting the `!= null`
|
||||||
|
can lead to exceptions in checked mode, such as
|
||||||
|
"EXCEPTION: type 'Hero' is not a subtype of type 'bool' of 'boolean expression'".
|
||||||
|
For more information, see
|
||||||
|
[Booleans](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#booleans)
|
||||||
|
in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html).
|
||||||
|
+includeShared('{ts}', 'directives-ngIf-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngIf-5')
|
||||||
|
+includeShared('{ts}', 'directives-ngSwitch-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngSwitch-2')
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-3')
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-4')
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-5')
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-6')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngFor-7')
|
||||||
|
+includeShared('{ts}', 'directives-ngForTrackBy-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.dart', 'trackByHeroes')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngForTrackBy-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgForTrackBy-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'directives-ngForTrackBy-3')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'star-template')
|
||||||
|
+includeShared('{ts}', 'star-template-ngIf-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngIf-2a')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-2a')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngIf-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngIf-3')
|
||||||
|
// Changed from RED to ORANGE, since this isn't so dire a situation in Dart.
|
||||||
|
.callout.is-important
|
||||||
|
header Remember the brackets!
|
||||||
|
:marked
|
||||||
|
Don’t make the mistake of writing `ngIf="currentHero"`!
|
||||||
|
That syntax assigns the *string* value "currentHero" to `ngIf`,
|
||||||
|
which won't work because `ngIf` expects a bool.
|
||||||
|
+includeShared('{ts}', 'star-template-ngSwitch-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch-expanded')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngSwitch-2')
|
||||||
|
+includeShared('{ts}', 'star-template-ngFor-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-3a')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngFor-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-3')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngFor-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
||||||
|
+includeShared('{ts}', 'star-template-ngFor-4')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'local-vars-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
||||||
|
+includeShared('{ts}', 'local-vars-2')
|
||||||
|
+includeShared('{ts}', 'local-vars-refs')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'var-phone')(format=".")
|
||||||
|
+includeShared('{ts}', 'local-vars-value')
|
||||||
|
+includeShared('{ts}', 'local-vars-form-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form')(format=".")
|
||||||
|
+includeShared('{ts}', 'local-vars-form-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form-a')(format=".")
|
||||||
|
+includeShared('{ts}', 'local-vars-form-3')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'io-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'io-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-1')(format=".")
|
||||||
|
:marked
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Alternatively, we can identify members in the `inputs` and `outputs` arrays
|
||||||
|
of the directive metadata, as in this example:
|
||||||
|
+makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-2')(format=".")
|
||||||
|
<br>
|
||||||
|
:marked
|
||||||
|
We can specify an input/output property either with a decorator or in a metadata array.
|
||||||
|
Don't do both!
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-4')
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-5')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'my-click')(format=".")
|
||||||
|
+includeShared('{ts}', 'inputs-outputs-6')
|
||||||
|
+makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-1')(format=".")
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
We can also alias property names in the `inputs` and `outputs` arrays.
|
||||||
|
We write a colon-delimited (`:`) string with
|
||||||
|
the directive property name on the *left* and the public alias on the *right*:
|
||||||
|
+makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-2')(format=".")
|
||||||
|
|
||||||
|
<a id="expression-operators"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Template expression operators
|
||||||
|
The template expression language employs a subset of Dart syntax supplemented with a few special operators
|
||||||
|
for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_.
|
||||||
|
.callout.is-helpful
|
||||||
|
header Dart difference: ?. is a Dart operator
|
||||||
|
:marked
|
||||||
|
The Elvis operator (`?.`) is part of the Dart language.
|
||||||
|
It's considered a template expression operator because
|
||||||
|
Angular 2 supports `?.` even in TypeScript and JavaScript apps.
|
||||||
|
+includeShared('{ts}', 'expression-operators-pipe-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-pipe-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-pipe-3')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-3')(format=".")
|
||||||
|
//
|
||||||
|
NOTE: Intentionally omit discussion of the json pipe.
|
||||||
|
+includeShared('{ts}', 'expression-operators-pipe-4')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'pipes-json')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-1')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-2')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-2')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-1')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-3')
|
||||||
|
// +includeShared('{ts}', 'expression-operators-elvis-4')
|
||||||
|
:marked
|
||||||
|
Dart throws an exception, and so does Angular:
|
||||||
|
code-example(format="" language="html").
|
||||||
|
EXCEPTION: The null object does not have a getter 'firstName'.
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-5')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-4')(format=".")
|
||||||
|
|
||||||
|
//
|
||||||
|
NOTE: Intentionally skip ugly null checking you wouldn't do in Dart.
|
||||||
|
That means skipping the shared sections 'expression-operators-elvis-6' & 7,
|
||||||
|
plus the example 'elvis-5'.
|
||||||
|
:marked
|
||||||
|
This approach has merit but can be cumbersome, especially if the property path is long.
|
||||||
|
Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-8')
|
||||||
|
+makeExample('template-syntax/dart/lib/app_component.html', 'elvis-6')(format=".")
|
||||||
|
+includeShared('{ts}', 'expression-operators-elvis-9')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'summary')
|
||||||
|
|||||||
@ -598,14 +598,14 @@ table
|
|||||||
a(id="one-time-initialization")
|
a(id="one-time-initialization")
|
||||||
:marked
|
:marked
|
||||||
### One-time string initialization
|
### One-time string initialization
|
||||||
We *should omit the brackets* when
|
We *should* omit the brackets when all of the following are true:
|
||||||
* the target property accepts a string value
|
* The target property accepts a string value.
|
||||||
* the string is a fixed value that we can bake into the template
|
* The string is a fixed value that we can bake into the template.
|
||||||
* this initial value never changes
|
* This initial value never changes.
|
||||||
|
|
||||||
We routinely initialize attributes this way in standard HTML and it works
|
We routinely initialize attributes this way in standard HTML, and it works
|
||||||
just as well for directive and component property initialization.
|
just as well for directive and component property initialization.
|
||||||
In the following example, we initialize the `prefix` property of the `HeroDetailComponent` to a fixed string,
|
The following example initializes the `prefix` property of the `HeroDetailComponent` to a fixed string,
|
||||||
not a template expression. Angular sets it and forgets it.
|
not a template expression. Angular sets it and forgets it.
|
||||||
// #enddocregion property-binding-12
|
// #enddocregion property-binding-12
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-7')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-7')(format=".")
|
||||||
@ -1307,7 +1307,7 @@ figure.image-display
|
|||||||
A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
|
A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
|
||||||
Here's an example, first with `*ngSwitchWhen` and `*ngSwitchDefault` and then again with `<template>` tags:
|
Here's an example, first with `*ngSwitchWhen` and `*ngSwitchDefault` and then again with `<template>` tags:
|
||||||
// #enddocregion star-template-ngSwitch-1
|
// #enddocregion star-template-ngSwitch-1
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')
|
+makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
|
||||||
// #docregion star-template-ngSwitch-2
|
// #docregion star-template-ngSwitch-2
|
||||||
:marked
|
:marked
|
||||||
The `*ngSwitchWhen` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
|
The `*ngSwitchWhen` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user