docs(guide/template-syntax): copy edit TypeScript version

Also update some samples. This PR replaces #734 & #756.
This commit is contained in:
Kathy Walrath 2016-01-28 16:01:39 -08:00 committed by Ward Bell
parent 312516d12e
commit dd0d822cbc
4 changed files with 492 additions and 498 deletions

View File

@ -208,9 +208,9 @@ button</button>
<!-- #enddocregion class-binding-1 -->
<!-- #docregion class-binding-2 -->
<!-- reset all class names with a string binding -->
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="'bad curly'">Bad curly</div>
[class]="badCurly">Bad curly</div>
<!-- #enddocregion class-binding-2 -->
<!-- #docregion class-binding-3 -->
@ -370,24 +370,14 @@ After setClasses(), the classes are "{{classDiv.className}}"
<p>setStyles returns {{setStyles() | json}}</p>
<!-- #docregion NgStyle-2 -->
<div [ngStyle]="setStyles()">
This div is italic, normal weight, and x-large
This div is italic, normal weight, and extra large (24px)
</div>
<!-- #enddocregion NgStyle-2 -->
<div [ngStyle]="setStyles()" #styleDiv>
After setStyles(), the styles are "{{getStyles(styleDiv)}}"
</div>
<h3>Use setStyles2() - camelCase style property names</h3>
<p>setStyles2 returns {{setStyles2() | json}}</p>
<!-- #docregion NgStyle-3 -->
<div [ngStyle]="setStyles2()">
This div is italic, normal weight, and x-large
</div>
<!-- #enddocregion NgStyle-3 -->
<div [ngStyle]="setStyles2()" #styleDiv2>
After setStyles2(), the styles are "{{getStyles(styleDiv2)}}"
</div>
<p>After setStyles(), the DOM confirms that the styles are
<span [ngStyle]="setStyles()" #styleDiv>
"{{getStyles(styleDiv)}}"
</span>.
</p>
<!-- not used in chapter -->
@ -480,8 +470,8 @@ After setClasses(), the classes are "{{classDiv.className}}"
<br>
<div class="box">
<!-- #docregion NgFor-3 -->
<!-- Ex: 1 - Hercules Son of Zeus -->
<!-- #docregion NgFor-3 -->
<div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
<!-- #enddocregion NgFor-3 -->
</div>

View File

@ -29,6 +29,7 @@ export class AppComponent {
actionName = 'Go for it';
alert = alerter;
badCurly = 'bad curly';
callFax(value:string) {this.alert(`Faxing ${value} ...`)}
callPhone(value:string) {this.alert(`Calling ${value} ...`)}
canSave = true;
@ -130,7 +131,7 @@ export class AppComponent {
// CSS property names
'font-style': this.canSave ? 'italic' : 'normal', // italic
'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
'font-size': this.isSpecial ? 'x-large': 'smaller', // larger
'font-size': this.isSpecial ? '24px' : '8px', // 24px
}
// #enddocregion setStyles
// compensate for DevMode (sigh)
@ -143,25 +144,6 @@ export class AppComponent {
}
// #enddocregion setStyles
// #docregion setStyles2
setStyles2() {
let styles = {
// camelCase style properties work too
fontStyle: this.canSave ? 'italic' : 'normal', // italic
fontWeight: !this.isUnchanged ? 'bold' : 'normal', // normal
fontSize: this.isSpecial ? 'x-large': 'smaller', // larger
}
// #enddocregion setStyles2
// compensate for DevMode (sigh)
if (JSON.stringify(styles) === JSON.stringify(this._priorStyles2)){
return this._priorStyles2;
}
this._priorStyles2 = styles;
// #docregion setStyles2
return styles;
}
// #enddocregion setStyles2
toeChoice = '';
toeChooser(picker:HTMLFieldSetElement){
let choices = picker.children;

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 160 KiB