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 `
  • ` by inserting an Angular event binding to its click event. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)') :marked Focus on the event binding @@ -190,21 +189,21 @@ code-example(language="bash"). We no longer need the static `hero` property of the `AppComponent`. **Replace** it with this simple `selectedHero` property: - +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)') + +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)') :marked We’ve decided that none of the heroes should be selected before the user picks a hero so we won’t initialize the `selectedHero` as we were doing with `hero`. Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked. - +makeExample('toh-2/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)') + +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)') :marked We will be showing the selected hero's details in our template. At the moment, it is still referring to the old `hero` property. Let’s fix the template to bind to the new `selectedHero` property. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (Binding to the selectedHero\'s name)') + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)') :marked ### Hide the empty detail with ngIf @@ -266,16 +265,16 @@ code-example(language="bash"). The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise. We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (Setting the CSS class)')(format=".") + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".") :marked Notice in the template that the `class.selected` is surrounded in square brackets (`[]`). - This is the syntax for a Property Binding, a binding in which data flows one way + This is the syntax for a **property binding**, a binding in which data flows one way from the data source (the expression `hero === selectedHero`) to a property of `class`. - +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".") + +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".") .l-sub-section :marked - Learn more about [Property Binding](../guide/template-syntax.html#property-binding) + Learn more about [property bindings](../guide/template-syntax.html#property-binding) in the Template Syntax chapter. :marked @@ -290,7 +289,7 @@ code-example(language="bash"). Here's the complete `app.component.ts` as it stands now: - +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts') + +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts') .l-main-section :marked