413 lines
25 KiB
Plaintext
413 lines
25 KiB
Plaintext
include ../../../../_includes/_util-fns
|
||
|
||
+includeShared('../../../ts/latest/guide/template-syntax.jade', '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')
|
||
+makeExample('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')
|