docs(template-syntax): update cache copy from latest + post-RC5 Dart resync
closes #2121 Contributes to #2077.
This commit is contained in:
parent
e6db3ebadb
commit
6df26b5058
|
@ -176,7 +176,12 @@ class AppComponent implements OnInit, AfterViewInit {
|
||||||
// #enddocregion NgStyle
|
// #enddocregion NgStyle
|
||||||
|
|
||||||
String title = 'Template Syntax';
|
String title = 'Template Syntax';
|
||||||
|
// #docregion evil-title
|
||||||
|
String evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
|
||||||
|
// #enddocregion evil-title
|
||||||
|
|
||||||
String toeChoice;
|
String toeChoice;
|
||||||
|
|
||||||
String toeChooser(Element picker) {
|
String toeChooser(Element picker) {
|
||||||
List<Element> choices = picker.children;
|
List<Element> choices = picker.children;
|
||||||
for (var i = 0; i < choices.length; i++) {
|
for (var i = 0; i < choices.length; i++) {
|
||||||
|
|
|
@ -197,13 +197,18 @@ button</button>
|
||||||
<!-- #enddocregion property-binding-7 -->
|
<!-- #enddocregion property-binding-7 -->
|
||||||
|
|
||||||
<!-- #docregion property-binding-vs-interpolation -->
|
<!-- #docregion property-binding-vs-interpolation -->
|
||||||
Interpolated: <img src="{{heroImageUrl}}"><br>
|
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
|
||||||
Property bound: <img [src]="heroImageUrl">
|
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
|
||||||
|
|
||||||
<div>The interpolated title is {{title}}</div>
|
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
|
||||||
<div [innerHTML]="'The [innerHTML] title is '+title"></div>
|
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
|
||||||
<!-- #enddocregion property-binding-vs-interpolation -->
|
<!-- #enddocregion property-binding-vs-interpolation -->
|
||||||
|
|
||||||
|
<!-- #docregion property-binding-vs-interpolation-sanitization -->
|
||||||
|
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
|
||||||
|
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
|
||||||
|
<!-- #enddocregion property-binding-vs-interpolation-sanitization -->
|
||||||
|
|
||||||
<a class="to-toc" href="#toc">top</a>
|
<a class="to-toc" href="#toc">top</a>
|
||||||
|
|
||||||
<!-- attribute binding -->
|
<!-- attribute binding -->
|
||||||
|
|
|
@ -858,9 +858,18 @@ block style-property-name-dart-diff
|
||||||
header [()] = banana in a box
|
header [()] = banana in a box
|
||||||
:marked
|
:marked
|
||||||
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
|
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
|
||||||
:marked
|
|
||||||
Alternatively, we can use the canonical prefix form:
|
+ifDocsFor('ts|js')
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
|
.callout.is-important
|
||||||
|
header FormsModule is Required to use ngModel
|
||||||
|
:marked
|
||||||
|
Before we can use the `ngModel` directive in a two-way data binding,
|
||||||
|
we must import the `FormsModule` and add it to the Angular module's `imports` list.
|
||||||
|
Learn more about the `FormsModule` and `ngModel` in the
|
||||||
|
[Forms](../guide/forms.html#ngModel) chapter.
|
||||||
|
|
||||||
|
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
|
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
|
||||||
|
|
||||||
|
|
|
@ -859,20 +859,17 @@ block style-property-name-dart-diff
|
||||||
:marked
|
:marked
|
||||||
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
|
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
|
||||||
|
|
||||||
.callout.is-important
|
+ifDocsFor('ts|js')
|
||||||
|
.callout.is-important
|
||||||
header FormsModule is Required to use ngModel
|
header FormsModule is Required to use ngModel
|
||||||
:marked
|
:marked
|
||||||
Before we can use `ngModel` two-way data binding, we need to import the `FormsModule`
|
Before we can use the `ngModel` directive in a two-way data binding,
|
||||||
package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
|
we must import the `FormsModule` and add it to the Angular module's `imports` list.
|
||||||
of external modules used by our application.
|
Learn more about the `FormsModule` and `ngModel` in the
|
||||||
<br>Learn more about the `FormsModule` and `ngModel` in the
|
|
||||||
[Forms](../guide/forms.html#ngModel) chapter.
|
[Forms](../guide/forms.html#ngModel) chapter.
|
||||||
|
|
||||||
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
|
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
|
||||||
|
|
||||||
:marked
|
|
||||||
Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:
|
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
|
|
||||||
:marked
|
:marked
|
||||||
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
|
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue