diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index dfc137c3b8..c3e95ce6d0 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -2,17 +2,18 @@ include ../_util-fns
:marked
# Once Upon a Time
+
+ Every story starts somewhere.
+ Our story starts where the [QuickStart](../quickstart.html) ends.
- Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
+ **Try it out**. Here's a link to a .
- Run the for this part.
-
- Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps
- which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
+ Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps,
+ which provide the prerequisites, folder structure, and core files for the Tour of Heroes.
include ../_quickstart_repo
:marked
- We should have the following structure:
+ You should have the following structure:
.filetree
.file angular-tour-of-heroes
@@ -32,120 +33,101 @@ include ../_quickstart_repo
.file typings.json
:marked
## Keep the app transpiling and running
- We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
+ To start the TypeScript compiler in watch mode and start the server, type the following:
+
code-example(language="bash").
npm start
:marked
- This command runs the compiler in watch mode, starts the server, launches the app in a browser,
- and keeps the app running while we continue to build the Tour of Heroes.
+ This command launches the app in a browser
+ and keeps the app running while you build the Tour of Heroes.
.l-main-section
:marked
- ## Show our Hero
- We want to display Hero data in our app
-
- Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property
- for a hero named "Windstorm".
+ ## Show your hero
+ To display hero data in the app,
+ add two properties to the `AppComponent`: a `title` property for the app name and a `hero` property
+ for a hero named "Windstorm."
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
:marked
- Now we update the template in the `@Component` decoration with data bindings to these new properties.
+ Now update the template in the `@Component` decoration with data bindings to these new properties.
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero')
:marked
- The browser should refresh and display our title and hero.
+ The browser refreshes and display the title and hero name.
- The double curly braces tell our app to read the `title` and `hero` properties from the component and render them.
+ The double curly braces instruct the app to read the `title` and `hero` properties from the component and render them.
This is the "interpolation" form of one-way data binding.
.l-sub-section
:marked
- Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html).
+ Learn more about interpolation in the [Displaying Data page](../guide/displaying-data.html).
:marked
### Hero object
- At the moment, our hero is just a name. Our hero needs more properties.
+ Our hero needs more properties.
Let's convert the `hero` from a literal string to a class.
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.
+ Add these properties near the top of the `app.component.ts` file, just below the import statement.
+makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".")
:marked
- 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".
+ Now in your `Hero` class, refactor the 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/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".")
:marked
- Because we changed the hero from a string to an object,
- we update the binding in the template to refer to the hero’s `name` property.
+ Because you changed the hero from a string to an object,
+ update the binding in the template to refer to the hero's `name` property.
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2')
:marked
- The browser refreshes and continues to display our hero’s name.
-
- ### Adding more HTML
- Displaying a name is good, but we want to see all of our hero’s properties.
- We’ll add a `
` for our hero’s `id` property and another `
` for our hero’s `name`.
-
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-properties')
-:marked
- Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
+ The browser refreshes and continues to display the hero's name.
- ### Multi-line template strings
+ ### Adding HTML with multi-line template strings
- We could make a more readable template with string concatenation
- but that gets ugly fast, it is harder to read, and
- it is easy to make a spelling error. Instead,
- let’s take advantage of the template strings feature
- in ES2015 and TypeScript to maintain our sanity.
-
- Change the quotes around the template to back-ticks and
- put the `
`, `` and `` elements on their own lines.
+ Displaying a name is good, but we want to see all of the hero's properties.
+ For this update, you'll add a `
` for the hero's `id` property and another `
` for the hero's `name`.
+ To keep the template readable, you'll make some additional changes using the template strings feature
+ in ES2015 and TypeScript:
+ change the quotes around the template to backticks
+ and put the `
`, ``, and `` elements on their own lines.
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
- .callout.is-important
- header A back-tick is not a single quote
- :marked
- **Be careful!** A back-tick (`) looks a lot like a single quote (').
- It's actually a completely different character.
- Back-ticks can do more than demarcate a string.
- Here we use them in a limited way to spread the template over multiple lines.
- Everything between the back-ticks at the beginning and end of the template
- is part of a single template string.
+// CF: I removed the note about backticks. It wasn't appearing in the browser and Naomi didn't think it was necessary.
.l-main-section
:marked
- ## Editing Our Hero
+ ## Editing the hero name
We want to be able to edit the hero name in a textbox.
- Refactor the hero name `
` with `` and ` ` elements as shown below:
+ Refactor the hero name `` with `` and ` ` elements as shown:
+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
:marked
- We see in the browser that the hero’s name does appear in the ` ` textbox.
- But something doesn’t feel right.
- When we change the name, we notice that our change
- is not reflected in the ``. We won't get the desired behavior
- with a one-way binding to ` `.
+ The hero's name now appears in the ` ` textbox.
+ But if you change the name, you'll notice that your change
+ isn't reflected in the ``. To get the desired behavior,
+ you'll implement two-way binding to ` `.
- ### Two-Way Binding
+ ### Two-way binding
We intend to display the name of the hero in the ` `, change it,
- and see those changes wherever we bind to the hero’s name.
- In short, we want two-way data binding.
+ and see those changes wherever we bind to the hero's name.
+ This is known as two-way data binding.
- Before we can use two-way data binding for **form inputs**, we need to import the `FormsModule`
- package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
- of external modules used by our application.
- Now we have included the forms package which includes `ngModel`.
+ Before using two-way data binding for **form inputs**, import the `FormsModule`
+ package in your Angular module. Add the `FormsModule` to the `NgModule` decorator's `imports` array, which contains the list
+ of external modules that the app uses.
+ Now you have included the forms package that includes `ngModel`.
+makeExample('toh-1/ts/app/app.module.ts', '', 'app.module.ts (FormsModule import)')
@@ -153,43 +135,41 @@ code-example(language="bash").
:marked
Learn more about the `FormsModule` and `ngModel` in the
[Forms](../guide/forms.html#ngModel) and
- [Template Syntax](../guide/template-syntax.html#ngModel) chapters.
+ [Template Syntax](../guide/template-syntax.html#ngModel) pages.
:marked
- Let’s update the template to use the **`ngModel`** built-in directive for two-way binding.
-
- Replace the ` ` with the following HTML
+ Now update the template to use the **`ngModel`** built-in directive for two-way binding.
+ In app.component.ts, replace the ` ` with the following HTML:
code-example(language="html").
<input [(ngModel)]="hero.name" placeholder="name">
:marked
- The browser refreshes. We see our hero again. We can edit the hero’s name and
+ The browser refreshes. Now you can edit the hero's name and
see the changes reflected immediately in the ``.
.l-main-section
:marked
- ## The Road We’ve Travelled
- Let’s take stock of what we’ve built.
-
- * Our Tour of Heroes uses the double curly braces of interpolation (a kind of one-way data binding)
- to display the application title and properties of a `Hero` object.
- * We wrote a multi-line template using ES2015’s template strings to make our template readable.
- * We can both display and change the hero’s name after adding a two-way data binding to the ` ` element
- using the built-in `ngModel` directive.
- * The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
-
- Run the for this part.
-
+ ## The road you've travelled
+ Let's take stock of what you've built.
+
+ * The Tour of Heroes app uses the double curly braces of interpolation (a type of one-way data binding)
+ to display the app title and properties of a `Hero` object.
+ * You wrote a multi-line template using ES2015's template strings to make the template readable.
+ * You added a two-way data binding to the ` ` element
+ using the built-in `ngModel` directive. This binding both displays the hero's name and allows users to change it.
+ * The `ngModel` directive propagates changes to every other binding of the `hero.name`.
+
+ **Try it out**. Here's a link to a .
+
Here's the complete `app.component.ts` as it stands now:
+makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
.l-main-section
:marked
- ## The Road Ahead
- Our Tour of Heroes only displays one hero and we really want to display a list of heroes.
- We also want to allow the user to select a hero and display their details.
- We’ll learn more about how to retrieve lists, bind them to the
- template, and allow a user to select a hero in the
- [next tutorial chapter](./toh-pt2.html).
+ ## The road ahead
+ In the [next tutorial page](./toh-pt2.html), you'll build on the Tour of Heroes app to display a list of heroes.
+ You'll also allow the user to select heroes and display their details.
+ You'll learn more about how to retrieve lists, bind them to the
+ template, and allow a user to select a hero.
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index fbf3d6325f..4d71a1bee9 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -3,21 +3,20 @@ include ../_util-fns
:marked
# It Takes Many Heroes
Our story needs more heroes.
- We’ll expand our Tour of Heroes app to display a list of heroes,
- allow the user to select a hero, and display the hero’s details.
-
- Run the for this part.
-
- Let’s take stock of what we’ll need to display a list of heroes.
- First, we need a list of heroes. We want to display those heroes in the view’s template,
- so we’ll need a way to do that.
+ In this page, you'll expand the Tour of Heroes app to display a list of heroes,
+ allow the user to select a hero, and display the hero's details.
+ **Try it out**. Here's a link to a .
+
+
.l-main-section
:marked
- ## Where We Left Off
- Before we continue with Part 2 of the Tour of Heroes,
- let’s verify we have the following structure after [Part 1](./toh-pt1.html).
- If not, we’ll need to go back to Part 1 and figure out what we missed.
+ ## Where you left off
+ Before you continue with Part 2 of the Tour of Heroes,
+ verify that you have the following structure after [Part 1](./toh-pt1.html).
+ If not, you'll need to go back to Part 1 and figure out what you missed.
+// CF: In the left nav bar, "Part 1" is numbered "2" and "Part 2" is numbered "3,"
+ so referring to "Part 1" etc. could be confusing.
.filetree
.file angular-tour-of-heroes
@@ -36,65 +35,71 @@ include ../_util-fns
.file tsconfig.json
.file typings.json
:marked
- ### Keep the app transpiling and running
- We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
+ ## Keep the app transpiling and running
+ To start the TypeScript compiler in watch mode and start the server, type the following:
code-example(language="bash").
npm start
:marked
- This will keep the application running while we continue to build the Tour of Heroes.
+ This command keeps the application running while you continue to build the Tour of Heroes.
.l-main-section
:marked
- ## Displaying Our Heroes
+ ## Displaying heroes
+ To display a list of heroes, you'll add the heroes to the view's template.
+
### Creating heroes
- Let’s create an array of ten heroes.
+ Create an array of ten heroes.
+// CF: I don't see a rule in the Angular Writing Guidelines for task titles. Is there a
+ preference for using gerunds ("Creating heroes") or imperatives ("Create heroes")?
+ Both styles are used in this tutorial.
+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,
- 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.
+ The `HEROES` array is of type `Hero`, the class defined in the previous page.
+ We aspire to fetch the list of heroes from a web service, but you'll take small steps
+ and display mock heroes for now.
### Exposing heroes
- Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+ 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)')
:marked
- We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array.
+ You didn't have to define the `heroes` type because TypeScript infers it from the `HEROES` array.
.l-sub-section
:marked
- We could have defined the heroes list here in this component class.
- But we know that ultimately we’ll get the heroes from a data service.
- Because we know where we are heading, it makes sense to separate the hero data
+ You could define the heroes list in the component class,
+ but ultimately you'll get the heroes from a data service.
+ Because we know where we're heading, it makes sense to separate the hero data
from the class implementation from the start.
:marked
### Displaying heroes in a template
- 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.
+ Your component has `heroes`. To display the hero names in an unordered list,
+ 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)')
:marked
- Now we have a template that we can fill with our heroes.
+ Now you can fill the template with hero names.
### Listing heroes with ngFor
- We want to bind the array of `heroes` in our component to our template, iterate over them,
+ Next, you'll bind the array of `heroes` in your component to your template, iterate over them,
and display them individually.
- We’ll need some help from Angular to do this. Let’s do this step by step.
+ You'll need some help from Angular to do this.
- First modify the ` ` tag by adding the built-in directive `*ngFor`.
+ First, modify the ` ` tag by adding the built-in directive `*ngFor`.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
.alert.is-critical
:marked
The leading asterisk (`*`) in front of `ngFor` is a critical part of this syntax.
+// CF: is a "critical" type note appropriate here? Could we merge this sentence with
+ the .l-sub-section below?
.l-sub-section
:marked
@@ -105,188 +110,196 @@ code-example(language="bash").
and stamps out instances of this template.
The quoted text assigned to `ngFor` means
- “*take each hero in the `heroes` array, store it in the local `hero` variable,
- and make it available to the corresponding template instance*”.
+ “*in the `heroes` array, store each hero in the local `hero` variable
+ and make it available to the corresponding template instance*.”
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.
+ We can reference this variable within the template to access a hero's properties.
Learn more about `ngFor` and template input variables in the
[Displaying Data](../guide/displaying-data.html#ngFor) and
- [Template Syntax](../guide/template-syntax.html#ngFor) chapters.
+ [Template Syntax](../guide/template-syntax.html#ngFor) pages.
:marked
- Now we insert some content between the ` ` tags
- that uses the `hero` template variable to display the hero’s properties.
+ Next, update the ` ` tags to add content
+ that uses the `hero` template variable to display the hero's properties.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
:marked
- When the browser refreshes, we see a list of heroes!
+ When the browser refreshes, you see a list of heroes.
### Styling our heroes
- Our list of heroes looks pretty bland.
- We want to make it visually obvious to a user which hero we are hovering over and which hero is selected.
+ The list of heroes looks pretty bland.
+ We want to give users a visual cue of which hero they are hovering over and which hero is selected.
- Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
+ To add some styles to your component, set the `styles` property on the `@Component` decorator
to the following CSS classes:
+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.
+ Notice that again you use the backtick 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.
+ That's a lot of styles! In a later page, you'll move the styles to a separate file.
- 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.
+ When you assign styles to a component, they are scoped to that specific component.
+ These styles apply only to your `AppComponent` and won't affect the outer HTML.
- Our template for displaying the heroes should now look like this:
+ Your template for displaying the heroes should look like this:
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
.l-main-section
:marked
- ## Selecting a Hero
- We have a list of heroes and we have a single hero displayed in our app.
- The list and the single hero are not connected in any way.
- We want the user to select a hero from our list, and have the selected hero appear in the details view.
- This UI pattern is widely known as "master-detail".
- In our case, the master is the heroes list and the detail is the selected hero.
+ ## Selecting a hero
+ The app now displays a list of heroes as well as a single hero in the details view.
+ The list and the details view are not connected in any way.
+ When the user selects a hero from the list, we want the selected hero to appear in the details view.
+ This UI pattern is known as "master-detail."
+ In this case, the master is the heroes list and the detail is the selected hero.
- Let’s connect the master to the detail through a `selectedHero` component property bound to a click event.
+ Let's connect the master to the detail through a `selectedHero` component property, which is bound to a click event.
- ### Click event
- We modify the ` ` by inserting an Angular event binding to its click event.
+ ### Add a click event
+ 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 (template excerpt)')
:marked
- Focus on the event binding
+ Focus on the event binding:
code-example(format="." language="bash").
(click)="onSelect(hero)"
:marked
- The parenthesis identify the ` ` element’s `click` event as the target.
+ The parentheses identify the ` ` element's `click` event as the target.
The expression to the right of the equal sign calls the `AppComponent` method, `onSelect()`,
passing the template input variable `hero` as an argument.
- That’s the same `hero` variable we defined previously in the `ngFor`.
+ That's the same `hero` variable you defined previously in the `ngFor` directive.
.l-sub-section
:marked
- Learn more about Event Binding in the
+ Learn more about event binding in the
[User Input](../guide/user-input.html) and
- [Templating Syntax](../guide/template-syntax.html#event-binding) chapters.
+ [Templating Syntax](../guide/template-syntax.html#event-binding) pages.
:marked
### Add the click handler
- Our event binding refers to an `onSelect` method that doesn’t exist yet.
- We’ll add that method to our component now.
-
- What should that method do? It should set the component’s selected hero to the hero that the user clicked.
-
- Our component doesn’t have a “selected hero” yet either. We’ll start there.
+
+
+ Your event binding refers to an `onSelect` method that doesn't exist yet.
+ The `onSelect` method sets the component's selected hero to the hero that the user clicks.
+ You'll add that method to your component shortly.
+
+ Your component also doesn't have a “selected hero” yet. Let's start there.
### Expose the selected hero
-
- We no longer need the static `hero` property of the `AppComponent`.
- **Replace** it with this simple `selectedHero` property:
+ You 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', 'app.component.ts (selectedHero)')
-
+ // CF: here I noticed that the hero names disappeared. Would it be helpful to mention that?
+ Perhaps "At this point, you'll notice that the hero names disappear in the browser. Don't
+ worry, you'll restore them soon."
: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`.
+ We don't want any of the heroes to be selected before the user picks a hero, so
+ you won't initialize the `selectedHero` as you did with `hero`.
- Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
+ Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
+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.
+ At the moment, the template still refers to the old `hero` property.
+ To change the template to bind to the new `selectedHero` property, update the code as follows:
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
:marked
### Hide the empty detail with ngIf
- When our app loads we see a list of heroes, but a hero is not selected.
+ When the app loads, you see a list of heroes, but a hero is not selected.
The `selectedHero` is `undefined`.
- That’s why we'll see the following error in the browser’s console:
+ That's why the following error appears in the browser's console:
code-example(language="html").
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
:marked
- Remember that we are displaying `selectedHero.name` in the template.
- This name property does not exist because `selectedHero` itself is undefined.
+ Remember how you're displaying `selectedHero.name` in the template?
+ This name property doesn't exist because `selectedHero` itself is undefined.
- We'll address this problem by keeping the hero detail out of the DOM until there is a selected hero.
+ To address this issue, you'll keep the hero detail out of the DOM until there is a selected hero.
+
- We wrap the HTML hero detail content of our template with a ``.
- Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
+ Wrap the HTML hero detail content of your template with a `
`.
+ Then add the `ngIf` built-in directive and set it to the `selectedHero` property of your component.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
+ // CF: Would it be helpful to note that now the list of names reappears in the browser?
.alert.is-critical
:marked
Remember that the leading asterisk (`*`) in front of `ngIf` is
a critical part of this syntax.
+ // CF: is a "critical" type note appropriate here? Could I merge this sentence with
+ the next section?
:marked
When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
- There will be no hero detail elements and no bindings to worry about.
+ There are no hero detail elements or bindings to worry about.
When the user picks a hero, `selectedHero` becomes "truthy" and
`ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
.l-sub-section
:marked
- `ngIf` and `ngFor` are called “structural directives” because they can change the
+ `ngIf` and `ngFor` are called "structural directives" because they can change the
structure of portions of the DOM.
In other words, they give structure to the way Angular displays content in the DOM.
- Learn more about `ngIf`, `ngFor` and other structural directives in the
+ Learn more about `ngIf`, `ngFor`, and other structural directives in the
[Structural Directives](../guide/structural-directives.html) and
- [Template Syntax](../guide/template-syntax.html#directives) chapters.
+ [Template Syntax](../guide/template-syntax.html#directives) pages.
:marked
- The browser refreshes and we see the list of heroes but not the selected hero detail.
+ The browser refreshes and you see the list of heroes but not the selected hero detail.
The `ngIf` keeps it out of the DOM as long as the `selectedHero` is undefined.
- When we click on a hero in the list, the selected hero displays in the hero details.
- Everything is working as we expect.
+ When you click a hero in the list, the selected hero displays in the hero details.
### Styling the selection
- We see the selected hero in the details area below but we can’t quickly locate that hero in the list above.
- We can fix that by applying the `selected` CSS class to the appropriate `
` in the master list.
- For example, when we select Magneta from the heroes list,
- we can make it pop out visually by giving it a subtle background color as shown here.
+ You see the selected hero in the details area, but it's difficult to quickly locate that hero in the list above.
+ You can fix that by applying the `selected` CSS class to the appropriate ` ` in the master list.
+ For example, when a user selects Magneta from the heroes list,
+ it will pop out with a subtle background color as shown:
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
:marked
- We’ll add a property binding on `class` for the `selected` class to the template. We'll set this to an expression that compares the current `selectedHero` to the `hero`.
+ In the template, you'll add a property binding on `class` for the `selected` class.
+ You'll set the class to an expression that compares the current `selectedHero` to the `hero`.
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*”.
+ You're saying “*apply the `selected` class if the heroes match, and 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=".")
: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
+ Notice that `class.selected` is surrounded by square brackets (`[]`).
+ This is the syntax for a *property 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=".")
.l-sub-section
:marked
Learn more about [property bindings](../guide/template-syntax.html#property-binding)
- in the Template Syntax chapter.
+ in the Template Syntax page.
:marked
- The browser reloads our app.
- We select the hero Magneta and the selection is clearly identified by the background color.
+ The browser reloads your app.
+ Click the hero Magneta. Your selection is clearly identified by the background color.
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
:marked
- We select a different hero and the tell-tale color switches to that hero.
+ Click a different hero name and the selection color switches to that hero.
Here's the complete `app.component.ts` as it stands now:
@@ -294,17 +307,17 @@ code-example(language="bash").
.l-main-section
:marked
- ## The Road We’ve Travelled
- Here’s what we achieved in this chapter:
+ ## The road you've travelled
+ Here's what you achieved in this page:
- * Our Tour of Heroes now displays a list of selectable heroes
- * We added the ability to select a hero and show the hero’s details
- * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
+ * Your Tour of Heroes app now displays a list of selectable heroes.
+ * You added the ability to select a hero and show the hero's details.
+ * You learned how to use the built-in directives `ngIf` and `ngFor` in a component's template.
- Run the for this part.
+ **Try it out**. Here's a link to a .
- ### The Road Ahead
- Our Tour of Heroes has grown, but it’s far from complete.
- We can't put the entire app into a single component.
- We need to break it up into sub-components and teach them to work together
- as we learn in the [next chapter](toh-pt3.html).
+ ## The road ahead
+ Your Tour of Heroes app has grown, but it's far from complete.
+ You can't put the entire app into a single component.
+
+ In the [next page](toh-pt3.html), you'll split the app into sub-components and make them work together.