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

docs(template-syntax): code fixes and copyedits #3365

Merged
merged 1 commit into from
Mar 9, 2017
Merged

docs(template-syntax): code fixes and copyedits #3365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
48 changes: 23 additions & 25 deletions public/docs/_examples/template-syntax/ts/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,15 +158,15 @@ <h3>

<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 -->
Expand All @@ -176,9 +176,9 @@ <h3>
<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>

Expand All @@ -193,7 +193,7 @@ <h3>
<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>

Expand Down Expand Up @@ -349,7 +349,7 @@ <h3>
<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 -->

Expand Down Expand Up @@ -402,14 +402,14 @@ <h3>
<!-- #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 -->

Expand Down Expand Up @@ -460,21 +460,21 @@ <h3>Result: {{currentHero.name}}</h3>
[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 -->
Expand All @@ -489,7 +489,7 @@ <h3>Result: {{currentHero.name}}</h3>
<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>
Expand All @@ -504,12 +504,12 @@ <h3>Result: {{currentHero.name}}</h3>

<!-- #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).
Expand All @@ -526,7 +526,7 @@ <h3>[ngStyle] binding to `currentStyles` - CSS property names</h3>
<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>

Expand Down Expand Up @@ -655,14 +655,12 @@ <h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<!-- 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">
Copy link
Contributor

Choose a reason for hiding this comment

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

I am fine with this as long as the text is not about <ng-container>. Can you confirm that it is not (I don't have time to look right now).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is not. Like for the structural directives page, this is just support code -- i.e., it is not featured on the page.

<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
</label>
</div>

<!-- #docregion NgSwitch -->
<div [ngSwitch]="currentHero.emotion">
Expand Down
48 changes: 12 additions & 36 deletions public/docs/_examples/template-syntax/ts/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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++);
Copy link
Contributor

Choose a reason for hiding this comment

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

Crockford will be very unhappy with you. He disapproves of ++ and prefers +=.

At the time I wrote this, I'm not sure that ++ was allowed.

All FYI. No need to revert.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

:) k

trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
}

@ViewChildren('noTrackBy') heroesNoTrackBy: QueryList<ElementRef>;
Expand All @@ -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} ...`); }
Expand Down Expand Up @@ -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[];

Expand All @@ -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 : '';
Expand All @@ -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',
Expand All @@ -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();
}
Expand All @@ -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'
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions public/docs/_examples/template-syntax/ts/src/app/hero-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>();

Expand All @@ -44,7 +44,7 @@ export class HeroDetailComponent {
this.lineThrough = this.lineThrough ? '' : 'line-through';
// #docregion deleteRequest
}
// #enddocregion deleteRequest
// #enddocregion deleteRequest
}

@Component({
Expand Down
5 changes: 2 additions & 3 deletions public/docs/_examples/template-syntax/ts/src/app/hero-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id=heroForm>
<div id="heroForm">
<!-- #docregion -->
<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
<div class="form-group">
Expand All @@ -10,7 +10,6 @@
</form>
<div [hidden]="!heroForm.form.valid">
{{submitMessage}}
<div>
</div>
<!-- #enddocregion -->
</div>

7 changes: 4 additions & 3 deletions public/docs/_examples/template-syntax/ts/src/app/hero.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' ),
Expand Down
Loading