diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 8e0d3c84a4..5d10fc55a9 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -1,4 +1,4 @@ -// #docregion pt2 +// #docregion import { Component } from '@angular/core'; export class Hero { @@ -42,7 +42,7 @@ const HEROES: Hero[] = [ `, -// #docregion styles-1 + // #docregion styles styles: [` .selected { background-color: #CFD8DC !important; @@ -92,18 +92,16 @@ const HEROES: Hero[] = [ border-radius: 4px 0 0 4px; } `] -// #enddocregion styles-1 + // #enddocregion styles }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; -// #docregion selected-hero-1 + // #docregion selected-hero selectedHero: Hero; -// #enddocregion selected-hero-1 + // #enddocregion selected-hero -// #docregion on-select-1 + // #docregion on-select onSelect(hero: Hero) { this.selectedHero = hero; } -// #enddocregion on-select-1 + // #enddocregion on-select } - -// #enddocregion pt2 diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts index dae4ddf676..42dbeb9f7d 100644 --- a/public/docs/_examples/toh-2/ts/app/main.ts +++ b/public/docs/_examples/toh-2/ts/app/main.ts @@ -1,7 +1,5 @@ -// #docregion pt1 import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent); -// #enddocregion pt1 diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index aced39f750..86a5b73dd1 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -50,7 +50,7 @@ code-example(language="bash"). ### Creating heroes Let’s create an array of ten heroes at the bottom of `app.component.ts`. -+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)') ++makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)') :marked The `HEROES` array is of type `Hero`, the class defined in part one, @@ -59,9 +59,9 @@ code-example(language="bash"). first and display mock heroes. ### Exposing heroes - Let’s create a property in `AppComponent` that exposes the heroes for binding. + Let’s create a public 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)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)') :marked We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array. @@ -76,7 +76,7 @@ code-example(language="bash"). Our component has `heroes`. Let’s create an unordered list in our template to display them. We’ll insert the following chunk of HTML below the title and above the hero details. -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)') ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)') :marked Now we have a template that we can fill with our heroes. @@ -107,7 +107,7 @@ code-example(language="bash"). “*take each hero in the `heroes` array, store it in the local `hero` variable, and make it available to the corresponding template instance*”. - The `let` keyword before "hero" identifies the `hero` as a template input variable. + The `let` keyword before "hero" identifies `hero` as a template input variable. We can reference this variable within the template to access a hero’s properties. Learn more about `ngFor` and template input variables in the @@ -130,21 +130,20 @@ code-example(language="bash"). Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator to the following CSS classes: -+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (Styling)') ++makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".") :marked Notice that we again use the back-tick notation for multi-line strings. + That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. + We'll do this in a later chapter. For now let's keep rolling. + When we assign styles to a component they are scoped to that specific component. Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML. Our template for displaying the heroes should now look like this: -+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)') - -:marked - That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. - We'll do this in a later chapter. For now let's keep rolling. ++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)') .l-main-section :marked @@ -160,7 +159,7 @@ code-example(language="bash"). ### Click event We modify the `