docs(template-syntax): code fixes and copyedits (#3365)
- onSave "no propagation" case _was_ propagating. Fixed. - `firstName` --> `name` (a few were missed during a previous edit). - Hercules had a _rate_ of 325, not an id; fixed so it matches figure. - Missing closing `</div>` in form HTML - Prose: fix json representation of Hercules (since Hero class has changed). - Added missing AppComponent properties used in template but not declared in class; which will likely result in errors when compiled with AOT. - Some "back to top" were not formatted properly after a figure. - Copyedits, e.g., Angular modules such the --> such as the - Removed Jade blocks no longer used by Dart.
This commit is contained in:
parent
033108342d
commit
a8ad96eb16
|
@ -158,15 +158,15 @@
|
|||
|
||||
<div>
|
||||
<!-- #docregion property-binding-syntax-1 -->
|
||||
<img [src] = "heroImageUrl">
|
||||
<img [src]="heroImageUrl">
|
||||
<hero-detail [hero]="currentHero"></hero-detail>
|
||||
<div [ngClass] = "{selected: isSelected}"></div>
|
||||
<div [ngClass]="{special: isSpecial}"></div>
|
||||
<!-- #enddocregion property-binding-syntax-1 -->
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<!-- #docregion event-binding-syntax-1 -->
|
||||
<button (click) = "onSave()">Save</button>
|
||||
<button (click)="onSave()">Save</button>
|
||||
<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
|
||||
<div (myClick)="clicked=$event" clickable>click me</div>
|
||||
<!-- #enddocregion event-binding-syntax-1 -->
|
||||
|
@ -176,9 +176,9 @@
|
|||
<div>
|
||||
Hero Name:
|
||||
<!-- #docregion 2-way-binding-syntax-1 -->
|
||||
<input [(ngModel)]="heroName">
|
||||
<input [(ngModel)]="name">
|
||||
<!-- #enddocregion 2-way-binding-syntax-1 -->
|
||||
{{heroName}}
|
||||
{{name}}
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
|
@ -193,7 +193,7 @@
|
|||
<br><br>
|
||||
|
||||
<!-- #docregion style-binding-syntax-1 -->
|
||||
<button [style.color] = "isSpecial ? 'red' : 'green'">
|
||||
<button [style.color]="isSpecial ? 'red' : 'green'">
|
||||
<!-- #enddocregion style-binding-syntax-1 -->
|
||||
button</button>
|
||||
|
||||
|
@ -349,7 +349,7 @@ button</button>
|
|||
<hr><h2 id="style-binding">Style Binding</h2>
|
||||
|
||||
<!-- #docregion style-binding-1 -->
|
||||
<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
|
||||
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
|
||||
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
|
||||
<!-- #enddocregion style-binding-1 -->
|
||||
|
||||
|
@ -402,14 +402,14 @@ button</button>
|
|||
<!-- #docregion event-binding-no-propagation -->
|
||||
<!-- Will save only once -->
|
||||
<div (click)="onSave()" clickable>
|
||||
<button (click)="onSave()">Save, no propagation</button>
|
||||
<button (click)="onSave($event)">Save, no propagation</button>
|
||||
</div>
|
||||
<!-- #enddocregion event-binding-no-propagation -->
|
||||
|
||||
<!-- #docregion event-binding-propagation -->
|
||||
<!-- Will save twice -->
|
||||
<div (click)="onSave()" clickable>
|
||||
<button (click)="onSave() || true">Save w/ propagation</button>
|
||||
<button (click)="onSave()">Save w/ propagation</button>
|
||||
</div>
|
||||
<!-- #enddocregion event-binding-propagation -->
|
||||
|
||||
|
@ -460,21 +460,21 @@ bindon-ngModel
|
|||
[ngModel]="currentHero.name"
|
||||
(ngModelChange)="currentHero.name=$event">
|
||||
<!-- #enddocregion NgModel-3 -->
|
||||
(ngModelChange) = "...name=$event"
|
||||
(ngModelChange)="...name=$event"
|
||||
<br>
|
||||
<!-- #docregion NgModel-4 -->
|
||||
<input
|
||||
[ngModel]="currentHero.name"
|
||||
(ngModelChange)="setUppercaseName($event)">
|
||||
<!-- #enddocregion NgModel-4 -->
|
||||
(ngModelChange) = "setUppercaseName($event)"
|
||||
(ngModelChange)="setUppercaseName($event)"
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- NgClass binding -->
|
||||
<hr><h2 id="ngClass">NgClass Binding</h2>
|
||||
|
||||
<p>currentClasses returns {{currentClasses | json}}</p>
|
||||
<p>currentClasses is {{currentClasses | json}}</p>
|
||||
<!-- #docregion NgClass-1 -->
|
||||
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
|
||||
<!-- #enddocregion NgClass-1 -->
|
||||
|
@ -489,7 +489,7 @@ bindon-ngModel
|
|||
<div [ngClass]="currentClasses">
|
||||
This div should be {{ canSave ? "": "not"}} saveable,
|
||||
{{ isUnchanged ? "unchanged" : "modified" }} and,
|
||||
{{ isSpecial ? "": "not"}} special after clicking "refresh".</div>
|
||||
{{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
|
||||
<br><br>
|
||||
|
||||
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
|
||||
|
@ -504,12 +504,12 @@ bindon-ngModel
|
|||
|
||||
<!-- #docregion NgStyle-1 -->
|
||||
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
|
||||
This div is x-large.
|
||||
This div is x-large or smaller.
|
||||
</div>
|
||||
<!-- #enddocregion NgStyle-1 -->
|
||||
|
||||
<h3>[ngStyle] binding to `currentStyles` - CSS property names</h3>
|
||||
<p>currentStyles returns {{currentStyles | json}}</p>
|
||||
<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
|
||||
<p>currentStyles is {{currentStyles | json}}</p>
|
||||
<!-- #docregion NgStyle-2 -->
|
||||
<div [ngStyle]="currentStyles">
|
||||
This div is initially italic, normal weight, and extra large (24px).
|
||||
|
@ -526,7 +526,7 @@ bindon-ngModel
|
|||
<div [ngStyle]="currentStyles">
|
||||
This div should be {{ canSave ? "italic": "plain"}},
|
||||
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
||||
{{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".</div>
|
||||
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
|
@ -655,14 +655,12 @@ bindon-ngModel
|
|||
<!-- NgSwitch binding -->
|
||||
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
|
||||
|
||||
<div>Pick your favorite hero</div>
|
||||
<p>
|
||||
<ng-container *ngFor="let h of heroes">
|
||||
<label>
|
||||
<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
|
||||
</label>
|
||||
</ng-container>
|
||||
</p>
|
||||
<p>Pick your favorite hero</p>
|
||||
<div>
|
||||
<label *ngFor="let h of heroes">
|
||||
<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- #docregion NgSwitch -->
|
||||
<div [ngSwitch]="currentHero.emotion">
|
||||
|
|
|
@ -31,8 +31,8 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
|
||||
ngAfterViewInit() {
|
||||
// Detect effects of NgForTrackBy
|
||||
trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount += 1);
|
||||
trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1);
|
||||
trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++);
|
||||
trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
|
||||
}
|
||||
|
||||
@ViewChildren('noTrackBy') heroesNoTrackBy: QueryList<ElementRef>;
|
||||
|
@ -42,6 +42,7 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
alert = alerter;
|
||||
badCurly = 'bad curly';
|
||||
classes = 'special';
|
||||
help = '';
|
||||
|
||||
callFax(value: string) {this.alert(`Faxing ${value} ...`); }
|
||||
callPhone(value: string) {this.alert(`Calling ${value} ...`); }
|
||||
|
@ -83,17 +84,9 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
|
||||
title = 'Template Syntax';
|
||||
|
||||
getStyles(el: Element) {
|
||||
let styles = window.getComputedStyle(el);
|
||||
let showStyles = {};
|
||||
for (let p in this.currentStyles) { // only interested in these styles
|
||||
showStyles[p] = styles[p];
|
||||
}
|
||||
return JSON.stringify(showStyles);
|
||||
}
|
||||
|
||||
getVal() { return this.val; }
|
||||
getVal(): number { return 2; }
|
||||
|
||||
name: string = Hero.heroes[0].name;
|
||||
hero: Hero; // defined to demonstrate template context precedence
|
||||
heroes: Hero[];
|
||||
|
||||
|
@ -107,18 +100,16 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
// heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
|
||||
// Public Domain terms of use: http://www.wpclipart.com/terms.html
|
||||
heroImageUrl = 'images/hero.png';
|
||||
// villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
|
||||
// Public Domain terms of use http://www.clker.com/disclaimer.html
|
||||
villainImageUrl = 'images/villain.png';
|
||||
|
||||
iconUrl = 'images/ng-logo.png';
|
||||
isActive = false;
|
||||
isSpecial = true;
|
||||
isUnchanged = true;
|
||||
|
||||
nullHero: Hero = null;
|
||||
|
||||
onCancel(event: KeyboardEvent) {
|
||||
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerHTML : '';
|
||||
this.alert('Canceled.' + evtMsg);
|
||||
}
|
||||
get nullHero(): Hero { return null; }
|
||||
|
||||
onClickMe(event: KeyboardEvent) {
|
||||
let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className : '';
|
||||
|
@ -128,9 +119,10 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
onSave(event: KeyboardEvent) {
|
||||
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
|
||||
this.alert('Saved.' + evtMsg);
|
||||
if (event) { event.stopPropagation(); }
|
||||
}
|
||||
|
||||
onSubmit() { /* referenced but not used */}
|
||||
onSubmit() {/* referenced but not used */}
|
||||
|
||||
product = {
|
||||
name: 'frimfram',
|
||||
|
@ -144,17 +136,6 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
this.heroesWithTrackByCountReset = 0;
|
||||
}
|
||||
|
||||
private samenessCount = 5;
|
||||
moreOfTheSame() { this.samenessCount++; };
|
||||
get sameAsItEverWas() {
|
||||
let result: string[] = Array(this.samenessCount);
|
||||
for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; }
|
||||
return result;
|
||||
// return [1,2,3,4,5].map(id => {
|
||||
// return {id:id, text: 'same as it ever was ...'};
|
||||
// });
|
||||
}
|
||||
|
||||
setUppercaseName(name: string) {
|
||||
this.currentHero.name = name.toUpperCase();
|
||||
}
|
||||
|
@ -174,8 +155,8 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
// #docregion setStyles
|
||||
currentStyles: {};
|
||||
setCurrentStyles() {
|
||||
// CSS styles: set per current state of component properties
|
||||
this.currentStyles = {
|
||||
// CSS styles: set per current state of component properties
|
||||
'font-style': this.canSave ? 'italic' : 'normal',
|
||||
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
|
||||
'font-size': this.isSpecial ? '24px' : '12px'
|
||||
|
@ -190,11 +171,6 @@ export class AppComponent implements AfterViewInit, OnInit {
|
|||
// #docregion trackById
|
||||
trackById(index: number, item: any): number { return item['id']; }
|
||||
// #enddocregion trackById
|
||||
|
||||
val = 2;
|
||||
// villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
|
||||
// Public Domain terms of use http://www.clker.com/disclaimer.html
|
||||
villainImageUrl = 'images/villain.png';
|
||||
}
|
||||
|
||||
// helper to track changes to viewChildren
|
||||
|
|
|
@ -12,7 +12,7 @@ import { Hero } from './hero';
|
|||
inputs: ['hero'],
|
||||
outputs: ['deleteRequest'],
|
||||
// #enddocregion input-output-2
|
||||
styles: ['button { margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
|
||||
styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
|
||||
// #docregion template-1
|
||||
template: `
|
||||
<div>
|
||||
|
@ -34,7 +34,7 @@ export class HeroDetailComponent {
|
|||
lineThrough = '';
|
||||
@Input() prefix = '';
|
||||
|
||||
// #docregion deleteRequest
|
||||
// #docregion deleteRequest
|
||||
// This component make a request but it can't actually delete a hero.
|
||||
deleteRequest = new EventEmitter<Hero>();
|
||||
|
||||
|
@ -44,7 +44,7 @@ export class HeroDetailComponent {
|
|||
this.lineThrough = this.lineThrough ? '' : 'line-through';
|
||||
// #docregion deleteRequest
|
||||
}
|
||||
// #enddocregion deleteRequest
|
||||
// #enddocregion deleteRequest
|
||||
}
|
||||
|
||||
@Component({
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div id=heroForm>
|
||||
<div id="heroForm">
|
||||
<!-- #docregion -->
|
||||
<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
|
||||
<div class="form-group">
|
||||
|
@ -10,7 +10,6 @@
|
|||
</form>
|
||||
<div [hidden]="!heroForm.form.valid">
|
||||
{{submitMessage}}
|
||||
<div>
|
||||
</div>
|
||||
<!-- #enddocregion -->
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
export class Hero {
|
||||
static nextId = 1;
|
||||
static nextId = 0;
|
||||
|
||||
static heroes: Hero[] = [
|
||||
new Hero(
|
||||
325,
|
||||
null,
|
||||
'Hercules',
|
||||
'happy',
|
||||
new Date(1970, 1, 25),
|
||||
'http://www.imdb.com/title/tt0065832/'
|
||||
'http://www.imdb.com/title/tt0065832/',
|
||||
325
|
||||
),
|
||||
new Hero(1, 'Mr. Nice', 'happy'),
|
||||
new Hero(2, 'Narco', 'sad' ),
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue