Skip to content

Commit e46447d

Browse files
committed
docs(template-syntax): post-RC5 Dart resync
Contributes to angular#2077. Suites passed: - public/docs/_examples/template-syntax/dart - public/docs/_examples/template-syntax/ts
1 parent cdf2a5f commit e46447d

File tree

4 files changed

+34
-22
lines changed

4 files changed

+34
-22
lines changed

public/docs/_examples/template-syntax/dart/lib/app_component.dart

+5
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,12 @@ class AppComponent implements OnInit, AfterViewInit {
176176
// #enddocregion NgStyle
177177

178178
String title = 'Template Syntax';
179+
// #docregion evil-title
180+
String evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
181+
// #enddocregion evil-title
182+
179183
String toeChoice;
184+
180185
String toeChooser(Element picker) {
181186
List<Element> choices = picker.children;
182187
for (var i = 0; i < choices.length; i++) {

public/docs/_examples/template-syntax/dart/lib/app_component.html

+9-4
Original file line numberDiff line numberDiff line change
@@ -197,13 +197,18 @@ <h3>
197197
<!-- #enddocregion property-binding-7 -->
198198

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

203-
<div>The interpolated title is {{title}}</div>
204-
<div [innerHTML]="'The [innerHTML] title is '+title"></div>
203+
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
204+
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
205205
<!-- #enddocregion property-binding-vs-interpolation -->
206206

207+
<!-- #docregion property-binding-vs-interpolation-sanitization -->
208+
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
209+
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
210+
<!-- #enddocregion property-binding-vs-interpolation-sanitization -->
211+
207212
<a class="to-toc" href="#toc">top</a>
208213

209214
<!-- attribute binding -->

public/docs/ts/_cache/guide/template-syntax.jade

+10-9
Original file line numberDiff line numberDiff line change
@@ -859,16 +859,17 @@ block style-property-name-dart-diff
859859
:marked
860860
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
861861

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

871-
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
872+
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
872873

873874
:marked
874875
Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:

public/docs/ts/latest/guide/template-syntax.jade

+10-9
Original file line numberDiff line numberDiff line change
@@ -859,16 +859,17 @@ block style-property-name-dart-diff
859859
:marked
860860
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
861861

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

871-
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
872+
+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
872873

873874
:marked
874875
Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:

0 commit comments

Comments
 (0)