diff --git a/public/docs/_examples/template-syntax/ts/package.json b/public/docs/_examples/template-syntax/ts/package.json index 245a10d30a..b2b21e7953 100644 --- a/public/docs/_examples/template-syntax/ts/package.json +++ b/public/docs/_examples/template-syntax/ts/package.json @@ -11,7 +11,7 @@ "author": "", "license": "ISC", "dependencies": { - "angular2": "2.0.0-alpha.44", + "angular2": "2.0.0-alpha.46", "systemjs": "0.19.2" }, "devDependencies": { diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.html b/public/docs/_examples/template-syntax/ts/src/app/app.html index 3af210b88a..37bab89d5d 100644 --- a/public/docs/_examples/template-syntax/ts/src/app/app.html +++ b/public/docs/_examples/template-syntax/ts/src/app/app.html @@ -374,3 +374,10 @@ See console log + + +
+

Enums in bindings

+

The name of the Color.Red enum is {{Color[Color.Red]}}

+

The current color number is {{color}}

+

diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.ts b/public/docs/_examples/template-syntax/ts/src/app/app.ts index fd4e4d238e..54418707fb 100644 --- a/public/docs/_examples/template-syntax/ts/src/app/app.ts +++ b/public/docs/_examples/template-syntax/ts/src/app/app.ts @@ -12,7 +12,7 @@ import {bootstrap, Component, CORE_DIRECTIVES, Input, Output, Directive, ElementRef, EventEmitter, - FORM_DIRECTIVES + NgForm, FORM_DIRECTIVES } from 'angular2/angular2'; class Hero { @@ -78,7 +78,7 @@ class HeroDetailComponent { hero: Hero; @Output() - deleted = new EventEmitter(); + deleted = new EventEmitter(); onDelete() { this.deleted.next(this.hero); @@ -121,8 +121,8 @@ class LoopbackComponent { }) class KeyUpComponent { values=''; - onKey(event) { - this.values += event.target.value + ' | '; + onKey(event:KeyboardEvent) { + this.values += (event.target).value + ' | '; } } @@ -136,7 +136,7 @@ class KeyUpComponent { }) class KeyUpComponentV2 { values=''; - onKey(value) { + onKey(value:string) { this.values += value + ' | '; } } @@ -157,8 +157,10 @@ class KeyUpComponentV3 { selector: 'little-tour', template: `

Little Tour of Heroes

- - + + `, directives: [CORE_DIRECTIVES] @@ -166,16 +168,18 @@ class KeyUpComponentV3 { class LittleTour { heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; - addHero(newHero) { - if (newHero.value) { - this.heroes.push(newHero.value); - newHero.value = null; // clear the newHero textbox + addHero(newHero:string) { + if (newHero) { + this.heroes.push(newHero); + newHero = null; // clear the newHero textbox } } } bootstrap(LittleTour); +enum Color {Red, Green, Blue}; + @Component({ selector: 'my-app', templateUrl: 'app/app.html', @@ -194,9 +198,13 @@ class AppComponent { callPhone(value:string) {alert(`Calling ${value} ...`)} canSave = true; + Color = Color; + color = Color.Red; + colorToggle() {this.color = (this.color === Color.Red)? Color.Blue : Color.Red} + currentHero = Hero.MockHeroes[0]; - getStyles(el){ + getStyles(el:Element){ let styles = window.getComputedStyle(el); let showStyles = {}; for (var p in this.setStyles()){ @@ -220,26 +228,26 @@ class AppComponent { nullHero:Hero = null; // or undefined - onCancel(event){ - let evtMsg = event ? ' Event target is '+ event.target.innerHTML : ''; + onCancel(event:KeyboardEvent){ + let evtMsg = event ? ' Event target is '+ (event.target).innerHTML : ''; alert('Canceled.'+evtMsg) } - onClickMe(event){ - let evtMsg = event ? ' Event target class is '+ event.target.className : ''; + onClickMe(event:KeyboardEvent){ + let evtMsg = event ? ' Event target class is '+ (event.target).className : ''; alert('Click me.'+evtMsg) } - onDeleted(hero){ + onDeleted(hero:Hero){ alert('Deleted hero: '+ (hero && hero.firstName)) } - onSave(event){ - let evtMsg = event ? ' Event target is '+ event.target.innerText : ''; + onSave(event:KeyboardEvent){ + let evtMsg = event ? ' Event target is '+ (event.target).innerText : ''; alert('Saved.'+evtMsg) } - onSubmit(form){ + onSubmit(form:NgForm){ let evtMsg = form.valid ? ' Form value is '+ JSON.stringify(form.value) : ' Form is invalid'; @@ -251,9 +259,9 @@ class AppComponent { price: 42 }; - setLastName(event){ - console.log(event); - this.currentHero.lastName = event; + setLastName(lastName:string){ + console.log(lastName); + this.currentHero.lastName = lastName; } setClasses() { @@ -272,10 +280,11 @@ class AppComponent { } } - toeChoice(picker){ + toeChoice(picker:HTMLFieldSetElement){ let choices = picker.children; for (let i=0; ichoices[i]; + if (choice.checked) {return choice.value} } } diff --git a/public/docs/_examples/template-syntax/ts/src/tsconfig.json b/public/docs/_examples/template-syntax/ts/src/tsconfig.json index 6a58b35a58..48fc224e99 100644 --- a/public/docs/_examples/template-syntax/ts/src/tsconfig.json +++ b/public/docs/_examples/template-syntax/ts/src/tsconfig.json @@ -6,6 +6,7 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, - "noImplicitAny": false + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true } } \ No newline at end of file diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index ec034acf05..a563a8545f 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -1181,7 +1181,7 @@ code-example(format="" language="html"). hero: Hero; @Output() - deleted = new EventEmitter(); + deleted = new EventEmitter(); onDelete() { this.deleted.next(this.hero);