You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
Copy file name to clipboardExpand all lines: public/docs/ts/latest/guide/template-syntax.jade
+12-14Lines changed: 12 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,7 @@ include ../_util-fns
6
6
7
7
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
8
8
9
-
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax.
10
-
11
-
# Table Of Contents
9
+
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
35
+
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
38
36
demonstrates all of the syntax and code snippets described in this chapter.
39
-
37
+
40
38
// #docregion html-1
41
39
.l-main-section
42
40
:marked
@@ -130,13 +128,13 @@ include ../_util-fns
130
128
// #enddocregion template-expressions-2
131
129
132
130
// #docregion template-expressions-context
131
+
- var lang =current.path[1]
132
+
- var details = lang ==='dart'?'template expressions can’t refer to static properties, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They can’t directly call <code>print</code> or functions imported from <code>dart:math</code>. They are restricted to referencing members of the expression context.':'template expressions cannot refer to anything in the global namespace. They can’t refer to <code>window</code> or <code>document</code>. They can’t call <code>console.log</code> or <code>Math.max</code>. They are restricted to referencing members of the expression context.'
133
133
:marked
134
134
<a id="expression-context"></a>
135
135
### Expression context
136
136
137
-
Perhaps more surprising, template expressions cannot refer to anything in the global namespace.
138
-
They can’t refer to `window` or `document`. They can’t call `console.log` or `Math.max`.
139
-
They are restricted to referencing members of the expression context.
137
+
Perhaps more surprising, !{details}
140
138
141
139
The *expression context* is typically the **component instance**, which is
142
140
the source of binding values.
@@ -241,14 +239,14 @@ include ../_util-fns
241
239
// #enddocregion template-statements-2
242
240
243
241
// #docregion template-statements-3
242
+
- var lang =current.path[1]
243
+
- var details = lang ==='dart'?'Template statements can’t refer to static properties on the class, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They can’t directly call <code>print</code> or functions imported from <code>dart:math</code>.':'Template statements cannot refer to anything in the global namespace. They can’t refer to <code>window</code> or <code>document</code>. They can’t call <code>console.log</code> or <code>Math.max</code>.'
244
244
:marked
245
245
### Statement context
246
246
247
-
As with expressions, statements cannot refer to anything in the global namespace.
248
-
They can’t refer to `window` or `document`. They can’t call `console.log` or `Math.max`.
249
-
250
-
Statements are restricted to referencing members of the statement context.
251
-
The statement context is typically the **component instance** to which we are binding an event.
247
+
As with expressions, statements can refer only to what's in the statement context — typically the
248
+
**component instance** to which we're binding the event.
249
+
!{details}
252
250
253
251
The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.
0 commit comments