From 6dc9e5d10bc1bd0a688c26300573255e01a38261 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sun, 13 Dec 2015 22:29:37 -0800 Subject: [PATCH] docs(Template Syntax): correct minor oversights in a.53 update closes #494 --- .../template-syntax/ts/app/app.component.html | 45 +++++++++++++------ .../template-syntax/ts/app/app.component.ts | 19 ++++++-- .../ts/app/hero-detail.component.ts | 5 +-- .../ts/app/my-click.directive.ts | 13 +++--- .../docs/ts/latest/guide/template-syntax.jade | 15 ++++--- 5 files changed, 65 insertions(+), 32 deletions(-) diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html index 1cf99f7545..d9c7aba1ce 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.html +++ b/public/docs/_examples/template-syntax/ts/app/app.component.html @@ -363,6 +363,7 @@ After setClasses(), the classes are "{{classDiv.className}}" +

Use setStyles() - CSS property names

setStyles returns {{setStyles() | json}}

@@ -373,6 +374,18 @@ After setClasses(), the classes are "{{classDiv.className}}" After setStyles(), the styles are "{{getStyles(styleDiv)}}"
+ +

Use setStyles2() - camelCase style property names

+

setStyles2 returns {{setStyles2() | json}}

+ +
+ This div is italic, normal weight, and x-large +
+ +
+ After setStyles2(), the styles are "{{getStyles(styleDiv)}}" +
+ @@ -421,25 +434,29 @@ After setClasses(), the classes are "{{classDiv.className}}"

NgSwitch Binding

-
+
Eenie - Meanie + Meanie Miney Moe ???
- -
You picked - - - - - - - -
- +
+
Pick a toe
+
You picked + + + + + + + + + +
+ +

NgFor Binding

@@ -462,7 +479,7 @@ After setClasses(), the classes are "{{classDiv.className}}"
-
{{i+1}} - {{hero.fullName}}
+
{{i + 1}} - {{hero.fullName}}

diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts index b285f1b3e9..31ed7ad6f8 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -111,18 +111,31 @@ export class AppComponent { // #docregion setStyles setStyles() { return { + // 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 } } // #enddocregion setStyles - - toeChoice(picker:HTMLFieldSetElement){ + + // #docregion setStyles2 + setStyles2() { + return { + // camelCase style properties works too + fontStyle: this.canSave ? 'italic' : 'normal', // italic + fontWeight: !this.isUnchanged ? 'bold' : 'normal', // normal + fontSize: this.isSpecial ? 'x-large': 'smaller', // larger + } + } + // #enddocregion setStyles2 + + toeChoice = ''; + toeChooser(picker:HTMLFieldSetElement){ let choices = picker.children; for (let i=0; ichoices[i]; - if (choice.checked) {return choice.value} + if (choice.checked) {return this.toeChoice = choice.value} } } diff --git a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts index 0851191ca6..0fdd9f436d 100644 --- a/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts @@ -1,3 +1,4 @@ +// #docplaster import {Component, Input, Output, EventEmitter} from 'angular2/core'; import {Hero} from './hero'; @@ -39,10 +40,6 @@ export class HeroDetailComponent { @Component({ selector: 'big-hero-detail', - /* - inputs: ['hero'], - outputs: ['deleted'], - */ template: `
diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts index 772a635b49..8f52f9953c 100644 --- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts +++ b/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts @@ -1,10 +1,11 @@ +// #docplaster import {Directive, Output, ElementRef, EventEmitter} from 'angular2/core'; @Directive({selector:'[mClick]'}) export class MyClickDirective { - // #docregion myClick-output-1 + // #docregion my-click-output-1 @Output('myClick') clicks = new EventEmitter(); - // #enddocregion myClick-output-1 + // #enddocregion my-click-output-1 constructor(el: ElementRef){ el.nativeElement .addEventListener('click', (event:Event) => { @@ -13,14 +14,14 @@ export class MyClickDirective { } } -// #docregion myClick-output-2 +// #docregion my-click-output-2 @Directive({ -// #enddocregion myClick-output-2 +// #enddocregion my-click-output-2 selector:'[myClick2]', -// #docregion myClick-output-2 +// #docregion my-click-output-2 outputs:['clicks:myClick'] }) -// #enddocregion myClick-output-2 +// #enddocregion my-click-output-2 export class MyClickDirective2 { clicks = new EventEmitter(); constructor(el: ElementRef){ diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index fba4810f62..b1cc811543 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -669,7 +669,7 @@ code-example(format="", language="html"). :marked Here are all variations in action, including the uppercase version: figure.image-display - img(src='/resources/images/devguide/template-syntax/ngModel-anim.gif' alt="NgModel variations") + img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations") :marked .l-main-section @@ -683,7 +683,7 @@ figure.image-display We don’t need many of those directives in Angular 2. Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system. Why create a directive to handle a click when we can write a simple binding such as this? -+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".") ++makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") :marked We still benefit from directives that simplify complex tasks. Angular still ships with built-in directives; just not as many. @@ -735,6 +735,10 @@ figure.image-display :marked Now add an `NgStyle` property binding to call it like this +makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-2')(format=".") +:marked + Alternatively, we can return an object with camelCase style property names with the same effects: ++makeExample('template-syntax/ts/app/app.component.ts', 'setStyles2')(format=".") +:marked .l-main-section @@ -953,7 +957,7 @@ figure.image-display We’re passing those `input` element objects across to the button elements where they become arguments to the `call()` methods in the event bindings. - ### Form variables + ### NgForm and local template variables Let's look at one final example, a Form, the poster child for local template variables. The HTML for a form can be quite involved as we saw in the [Forms](forms.html) chapter. @@ -968,7 +972,7 @@ figure.image-display It would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) if Angular hadn't taken it over. - It's actually the Angular built-in `Form` directive that wraps the native `HTMLFormElement` + It's actually `ngForm`, a reference to the Angular built-in `NgForm` directive that wraps the native `HTMLFormElement` and endows it with additional super powers such as the ability to track the validity of user input. @@ -1032,7 +1036,8 @@ figure.image-display +makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-2')(format=".")
:marked - We can specify an input/output property with a decorator or in one the metadata arrays — but not both. + We can specify an input/output property with a decorator or in one the metadata arrays. + Don't do both! :marked ### Aliasing input/output properties