Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(template-syntax): post-RC5 Dart resync #2121

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,12 @@ class AppComponent implements OnInit, AfterViewInit {
// #enddocregion NgStyle

String title = 'Template Syntax';
// #docregion evil-title
String evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
// #enddocregion evil-title

String toeChoice;

String toeChooser(Element picker) {
List<Element> choices = picker.children;
for (var i = 0; i < choices.length; i++) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,18 @@ <h3>
<!-- #enddocregion property-binding-7 -->

<!-- #docregion property-binding-vs-interpolation -->
Interpolated: <img src="{{heroImageUrl}}"><br>
Property bound: <img [src]="heroImageUrl">
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<div>The interpolated title is {{title}}</div>
<div [innerHTML]="'The [innerHTML] title is '+title"></div>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
<!-- #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>

<!-- attribute binding -->
Expand Down
15 changes: 14 additions & 1 deletion public/docs/ts/_cache/guide/template-syntax.jade
Original file line number Diff line number Diff line change
Expand Up @@ -858,8 +858,21 @@ block style-property-name-dart-diff
header [()] = banana in a box
:marked
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.

+ifDocsFor('ts|js')
.callout.is-important
header FormsModule is Required to use ngModel
:marked
Before we can use `ngModel` two-way data binding, we need to import the `FormsModule`
Copy link
Contributor

@wardbell wardbell Aug 16, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 chapter.

package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
of external modules used by our application.
<br>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
Alternatively, we can use the canonical prefix form:
Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is time to strike this alternative.

+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
:marked
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
Expand Down
19 changes: 10 additions & 9 deletions public/docs/ts/latest/guide/template-syntax.jade
Original file line number Diff line number Diff line change
Expand Up @@ -859,16 +859,17 @@ block style-property-name-dart-diff
:marked
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.

.callout.is-important
header FormsModule is Required to use ngModel
:marked
Before we can use `ngModel` two-way data binding, we need to import the `FormsModule`
package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
of external modules used by our application.
<br>Learn more about the `FormsModule` and `ngModel` in the
[Forms](../guide/forms.html#ngModel) chapter.
+ifDocsFor('ts|js')
.callout.is-important
header FormsModule is Required to use ngModel
:marked
Before we can use `ngModel` two-way data binding, we need to import the `FormsModule`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment above

package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
of external modules used by our application.
<br>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)')
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')

:marked
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider striking

Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:
Expand Down