- `,
+ `
// #enddocregion template
- // #docregion inputs
- inputs: ['hero']
- // #enddocregion inputs
-// #docregion v1
+// #docregion v1
})
export class HeroDetailComponent {
// #enddocregion v1
-// #docregion hero
+// #docregion hero-input
+ @Input()
+// #docregion hero
hero: Hero;
-// #enddocregion hero
+// #enddocregion hero
+// #enddocregion hero-input
// #docregion v1
}
// #enddocregion v1
diff --git a/public/docs/_examples/toh-3/ts/app/hero.ts b/public/docs/_examples/toh-3/ts/app/hero.ts
index ed746da042..f4b0cd6b35 100644
--- a/public/docs/_examples/toh-3/ts/app/hero.ts
+++ b/public/docs/_examples/toh-3/ts/app/hero.ts
@@ -1,5 +1,5 @@
// #docregion
-export interface Hero {
+export class Hero {
id: number;
name: string;
}
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index bc587e2390..4505e515a1 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -32,7 +32,7 @@ import {HeroService} from './hero.service';
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
index 72024f533a..2a17aafd39 100644
--- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
@@ -1,5 +1,5 @@
// #docregion
-import {Component} from 'angular2/core';
+import {Component, Input} from 'angular2/core';
import {Hero} from './hero';
@Component({
@@ -15,9 +15,8 @@ import {Hero} from './hero';
- `,
- inputs: ['hero']
+ `
})
export class HeroDetailComponent {
- hero: Hero;
+ @Input() hero: Hero;
}
diff --git a/public/docs/_examples/toh-4/ts/app/hero.ts b/public/docs/_examples/toh-4/ts/app/hero.ts
index a61b497759..e3eac516da 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
id: number;
name: string;
}
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 1c06a4ee46..31cb07858c 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -2,10 +2,10 @@
// #docregion
// #docregion v2
// #docregion import-oninit
-import { Component, OnInit } from 'angular2/core';
+import { Component, Input, OnInit } from 'angular2/core';
// #enddocregion import-oninit
// #docregion import-route-params
-import {RouteParams} from 'angular2/router';
+import { RouteParams } from 'angular2/router';
// #enddocregion import-route-params
import { Hero } from './hero';
@@ -20,15 +20,14 @@ import { HeroService } from './hero.service';
templateUrl: 'app/hero-detail.component.html',
// #enddocregion template-url
// #enddocregion v2
- styleUrls: ['app/hero-detail.component.css'],
- inputs: ['hero']
+ styleUrls: ['app/hero-detail.component.css']
// #docregion v2
})
// #enddocregion extract-template
// #docregion implement
export class HeroDetailComponent implements OnInit {
// #enddocregion implement
- hero: Hero;
+ @Input() hero: Hero;
// #docregion ctor
constructor(
diff --git a/public/docs/_examples/toh-5/ts/app/hero.ts b/public/docs/_examples/toh-5/ts/app/hero.ts
index a61b497759..e3eac516da 100644
--- a/public/docs/_examples/toh-5/ts/app/hero.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
id: number;
name: string;
}
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.css b/public/docs/_examples/toh-5/ts/app/heroes.component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.css
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts
index 1cea6e8f9c..8e0bf4403d 100644
--- a/public/docs/_examples/tutorial/ts/app/app.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/app.component.ts
@@ -26,5 +26,5 @@ import {HeroService} from './hero.service';
{path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent {
- public title = 'Tour of Heroes';
+ title = 'Tour of Heroes';
}
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
index ae5f048a57..f5a3719563 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
@@ -9,7 +9,7 @@ import {HeroService} from './hero.service';
styleUrls: ['app/dashboard.component.css']
})
export class DashboardComponent implements OnInit {
- public heroes: Hero[] = [];
+ heroes: Hero[] = [];
constructor(private _heroService: HeroService, private _router: Router) { }
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
index 0014918b8b..22f2e5222e 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, Input, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {Hero} from './hero';
@@ -7,11 +7,10 @@ import {HeroService} from './hero.service';
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
- styleUrls: ['app/hero-detail.component.css'],
- inputs: ['hero']
+ styleUrls: ['app/hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
- public hero: Hero;
+ @Input() hero: Hero;
constructor(private _heroService: HeroService,
private _routeParams: RouteParams) {
diff --git a/public/docs/_examples/tutorial/ts/app/hero.ts b/public/docs/_examples/tutorial/ts/app/hero.ts
index 34f6058c2f..e94ec6124a 100644
--- a/public/docs/_examples/tutorial/ts/app/hero.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
id: number;
name: string;
}
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.css b/public/docs/_examples/tutorial/ts/app/heroes.component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.css
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
index 2783981337..86996127a9 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
@@ -11,8 +11,8 @@ import {Hero} from './hero';
directives: [HeroDetailComponent]
})
export class HeroesComponent implements OnInit {
- public heroes: Hero[];
- public selectedHero: Hero;
+ heroes: Hero[];
+ selectedHero: Hero;
constructor(private _heroService: HeroService, private _router: Router) { }
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 0cc7b6271c..8c7f75d9d9 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -66,31 +66,15 @@ code-example(format="" language="bash").
### Hero object
At the moment, our hero is just a name. Our hero needs more properties.
- Let's convert the `hero` from a literal string to an interface.
+ Let's convert the `hero` from a literal string to a class.
- Create a `Hero` interface with `id` and `name` properties.
+ Create a `Hero` class with `id` and `name` properties.
For now put this near the top of the `app.component.ts` file, just below the import statement.
-+makeExample('toh-1/ts/app/app.component.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".")
-
-.l-sub-section
- :marked
- #### Interface or Class?
- Why a `Hero` interface and not a `Hero` class?
- We want a strongly typed `Hero`. We get strong typing with either option.
- Our choice depends on how we intend to use the `Hero`.
-
- If we need a `Hero` that goes beyond simple properties, a `Hero` with logic and behavior,
- we must define a class.
- If we only need type checking, the interface is sufficient and lighter weight.
-
- Lighter weight? Transpiling a class to JavaScript produces code.
- Transpiling an interface produces — nothing.
- If the class does nothing (and there is nothing for a `Hero` class to do right now),
- we prefer an interface.
++makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".")
:marked
- Now that we have a `Hero` interface, let’s refactor our component’s `hero` property to be of type `Hero`.
+ Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`.
Then initialize it with an id of `1` and the name, "Windstorm".
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".")
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index c39fe9fed4..b9fd02530a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -51,13 +51,13 @@ code-example(format="." language="bash").
+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)')
:marked
- The `HEROES` array is of type `Hero`, the interface defined in part one,
+ The `HEROES` array is of type `Hero`, the class defined in part one,
to create an array of heroes.
We aspire to fetch this list of heroes from a web service, but let’s take small steps
first and display mock heroes.
### Exposing heroes
- Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+ Let’s create a property in `AppComponent` that exposes the heroes for binding.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)')
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index 7f63a49c6c..fd105d8ddc 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -73,14 +73,13 @@ code-example(format="." language="bash").
:marked
-->
:marked
- We begin by importing the `Component` function from Angular so that we have it handy when we create
- the metadata for our component.
-
+ We begin by importing the `Component` and `Input` decorators from Angular because we're going to need them soon.
+
We create metadata with the `@Component` decorator where we
specify the selector name that identifies this component's element.
Then we export the class to make it available to other components.
- When we finish here, we'll import it into `AppComponent` and refer to its `` element.
+ When we finish here, we'll import it into `AppComponent` and create a corresponding `` element.
:marked
#### Hero Detail Template
At the moment, the *Heroes* and *Hero Detail* views are combined in one template in `AppComponent`.
@@ -100,18 +99,18 @@ code-example(format="." language="bash").
Let’s add that `hero` property we were talking about to the component class.
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
:marked
- Uh oh. We declared the `hero` property as type `Hero` but our `Hero` interface is over in the `app.component.ts` file.
- We have two components, each in their own file, that need to reference the `Hero` interface.
+ Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file.
+ We have two components, each in their own file, that need to reference the `Hero` class.
- We solve the problem by relocating the `Hero` interface from `app.component.ts` to its own `hero.ts` file.
+ We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
-+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero interface)')(format=".")
++makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
:marked
- We export the `Hero` interface from `hero.ts` because we'll need to reference it in both component files.
+ We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
-+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero interface)')
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
:marked
#### The *hero* property is an ***input***
@@ -137,14 +136,13 @@ code-example(format=".").
*source* properties do not.
:marked
There are a couple of ways we can declare that `hero` is an *input*.
- We'll do it by adding an `inputs` array to the `@Component` metadata.
-+makeExample('toh-3/ts/app/hero-detail.component.ts', 'inputs')
+ We'll do it the way we *prefer*, by annotating the `hero` property with the `@Input` decorator that we imported earlier.
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input')(format='.')
.l-sub-section
:marked
- Learn about the `@Input()` decorator way in the
+ Learn more about the `@Input()` decorator in the
[Attribute Directives](../guide/attribute-directives.html#input) chapter.
-:marked
.l-main-section
:marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 8400519f85..8a66eb04c8 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -113,7 +113,7 @@ code-example(format="." language="bash").
We'll move the mock data to its own file.
Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the `app` folder named `mock-heroes.ts`.
- We copy the `import {Hero} ...` statement as well because the heroes array uses the `Hero` interface.
+ We copy the `import {Hero} ...` statement as well because the heroes array uses the `Hero` class.
+makeExample('toh-4/ts/app/mock-heroes.ts', null, 'mock-heroes.ts (Heroes array)')
:marked