` elements on their own lines,
+ thanks to the
template literals feature in ES2015 and TypeScript. For more information, see
+
Template literals .
+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.
-
.l-main-section
:marked
- ## Editing Our Hero
+ ## Edit the hero name
- We want to be able to edit the hero name in a textbox.
+ Users should be able to edit the hero name in a textbox.
- Refactor the hero name `
` with `` and `` with `` and ``. We won't get the desired behavior
- with a one-way binding to ``. To get the desired behavior,
+ you can implement two-way binding.
- ### Two-Way Binding
+ ### Two-way binding
- We intend to display the name of the hero in the ``.
.l-main-section
:marked
- ## The Road We’ve Travelled
- Let’s take stock of what we’ve built.
+ ## The road you've travelled
+ Take stock of what you'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 ` ` tag by adding the built-in directive `*ngFor`.
+ 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.
-
.l-sub-section
:marked
- The (`*`) prefix to `ngFor` indicates that the ` ` element and its children
+ The (`*`) prefix to `ngFor` is a critical part of this syntax.
+ It indicates that the ` ` element and its children
constitute a master template.
- The `ngFor` directive iterates over the `heroes` array returned by the `AppComponent.heroes` property
- and stamps out instances of this template.
+ The `ngFor` directive iterates over the component's `heroes` array
+ and renders an instance of this template for each hero in that array.
- 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*”.
+ The `let hero` part of the expression identifies `hero` as the template input variable,
+ which holds the current hero item for each iteration.
+ You can reference this variable within the template to access the current hero's properties.
- 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
- [Displaying Data](../guide/displaying-data.html#ngFor) and
- [Template Syntax](../guide/template-syntax.html#ngFor) chapters.
+ Read more about `ngFor` and template input variables in the
+ [Showing an array property with *ngFor](../guide/displaying-data.html#ngFor) section of the
+ [Displaying Data](../guide/displaying-data.html) page and the
+ [ngFor](../guide/template-syntax.html#ngFor) section of the
+ [Template Syntax](../guide/template-syntax.html) page.
:marked
- Now we insert some content between the ` ` tags
- that uses the `hero` template variable to display the hero’s properties.
+ Within the ` ` tags, 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, a list of heroes appears.
- ### 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.
+ ### Style the heroes
+ Users should get 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 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.
+ Remember to 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.
+ Adding these styles makes the file much longer. 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 the `AppComponent` and don't affect the outer HTML.
- Our template for displaying the heroes should now look like this:
+ The template for displaying 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. But
+ the list and the details view are not connected.
+ When users select a hero from the list, the selected hero should 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.
+ Next you'll 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
+ Add a click event binding to the ` ` like this:
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)')
:marked
- Focus on the event binding
- code-example.
- (click)="onSelect(hero)"
- :marked
- The parenthesis 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`.
+ The parentheses identify the ` ` element's `click` event as the target.
+ The `onSelect(hero)` expression calls the `AppComponent` method, `onSelect()`,
+ passing the template input variable `hero`, as an argument.
+ That's the same `hero` variable you defined previously in the `ngFor` directive.
.l-sub-section
:marked
- Learn more about Event Binding in the
- [User Input](../guide/user-input.html) and
- [Templating Syntax](../guide/template-syntax.html#event-binding) chapters.
- :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.
-
- ### Expose the selected hero
-
- We no longer need the static `hero` property of the `AppComponent`.
- **Replace** it with this simple `selectedHero` property:
+ Learn more about event binding at the
+ [User Input](../guide/user-input.html) page and the
+ [Event binding](../guide/template-syntax.html#event-binding) section of the
+ [Template Syntax](../guide/template-syntax.html) page.
+ :marked
+ ### Add a click handler to expose the selected hero
+ You no longer need the `hero` property because you're no longer displaying a single hero; you're displaying a list of heroes.
+ But the user will be able to select one of the heroes by clicking on it.
+ So replace the `hero` property with this simple `selectedHero` property:
+
+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`.
+ The hero names should all be unselected 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.
+ The template still refers to the old `hero` property.
+ Bind to the new selectedHero property instead 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.
- The `selectedHero` is `undefined`.
- That’s why we'll see the following error in the browser’s console:
+ When the app loads, the `selectedHero` is undefined and won't be defined until you click a hero's name.
+ Angular can't display properties of the undefined `selectedHero` and throws the following error,
+ visible in the browser's console:
code-example(format="nocode").
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.
+ Although `selectedHero.name` is displayed in the template,
+ you must keep the hero detail out of the DOM until there is a selected hero.
- We'll address this problem by keeping 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 the template with a `
`.
+ Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
.alert.is-critical
:marked
- Remember that the leading asterisk (`*`) in front of `ngIf` is
- a critical part of this syntax.
+ Don't forget the asterisk (`*`) in front of `ngIf`.
+
+ :marked
+ The app no longer fails and the list of names displays again in the browser.
+
: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
+ When the user picks a hero, `selectedHero` becomes defined 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
- structure of portions of the DOM.
- In other words, they give structure to the way Angular displays content in the DOM.
+ Read more about `ngIf` and `ngFor` in the
+ [Structural Directives](../guide/structural-directives.html) page and the
+ [Built-in directives](../guide/template-syntax.html#directives) section of the
+ [Template Syntax](../guide/template-syntax.html) page.
- 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.
:marked
- The browser refreshes and we 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.
-
- ### Styling the selection
+ ### Style the selected hero
- 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.
+ While the selected hero details appear below the list, it's difficult to identify the selected hero within the list itself.
+
+ To make the selected hero more visible, you'll apply the CSS class, `selected`, to the ` ` that the user selects.
+ Then, for example, when "Magneta" is selected,
+ that name will render with a distinctive but subtle background color.
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 can add a property binding on `class` for the `selected` class.
+ You can 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*”.
- +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
- 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.
+ Read more about [property bindings](../guide/template-syntax.html#property-binding)
+ in the [Template Syntax](../guide/template-syntax.html) page.
+
+ :marked
+ The final version of the ` ` looks like this:
+
+ +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
+
+ :marked
+ 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`.
+
:marked
- The browser reloads our app.
- We select the hero Magneta and the selection is clearly identified by the background color.
+ After the browser refreshes, click Magneta. The background color clearly identifies your selection.
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 name.
- Here's the complete `app.component.ts` as it stands now:
+ Here's the complete `app.component.ts` as of now:
+makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts')
.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
+ * The Tour of Heroes app 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 ` element.
+ Later, you'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`.
- Let’s **cut** the *Hero Detail* content from `AppComponent` and **paste** it into the new template property of `HeroDetailComponent`.
+ ### Hero detail template
+ To separate the *Heroes* and *Hero Detail* views,
+ cut the *Hero Detail* content from `AppComponent` and paste it into the new template property, `HeroDetailComponent`.
- We previously bound to the `selectedHero.name` property of the `AppComponent`.
- Our `HeroDetailComponent` will have a `hero` property, not a `selectedHero` property.
- So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
+ You previously bound to the `selectedHero.name` property of the `AppComponent`.
+ `HeroDetailComponent` will have a `hero` property, not a `selectedHero` property.
+ So replace `selectedHero` with `hero` everywhere in the new template.
The result looks like this:
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
:marked
- Now our hero detail layout exists only in the `HeroDetailComponent`.
+ Now the hero detail layout exists only in the `HeroDetailComponent`.
- #### Add the *hero* property
- Let’s add that `hero` property we were talking about to the component class.
-+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
+ ### Add the *hero* property
+ Add the earlier mentioned `hero` property to the component class.
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero', 'app/hero-detail.component.ts')
:marked
- 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.
+ You may notice that the `hero` property is declared as type `Hero` but the `Hero` class is in the `app.component.ts` file.
+ There are two components, each in their own file, that need to reference the `Hero` class.
- We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
+ To resolve this issue, move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
+makeExample('toh-3/ts/app/hero.ts', '', 'app/hero.ts')(format=".")
:marked
- 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`**.
+ The `Hero` class is exported from `hero.ts` because it is referenced 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')
:marked
- #### The *hero* property is an ***input***
+ ### The *hero* property is an *input*
- The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`!
+ The `HeroDetailComponent` needs to know what hero to display. The parent `AppComponent` will do this work.
- The `AppComponent` knows which hero to show: the hero that the user selected from the list.
- The user's selection is in its `selectedHero` property.
+ `AppComponent` knows to display the hero that a user selects from the list
+ because the user's selection is in `AppComponent`'s `selectedHero` property.
- We will soon update the `AppComponent` template so that it binds its `selectedHero` property
- to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
+ You'll soon update the `AppComponent` template so that it binds its `selectedHero` property
+ to the `hero` property of the `HeroDetailComponent`. The binding *might* look like this:
code-example(language="html").
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
+// CF: As revealed further down on this page, indeed this is what the binding looks like. Why say "*might*"?
+ Could I remove this paragraph and then discuss the details of the binding later in this page,
+ where the binding is actually added?
:marked
- Notice that the `hero` property is the ***target*** of a property binding — it's in square brackets to the left of the (=).
+ The `hero` property is the *target* of a property binding; it's in square brackets to the left of the equal sign (=).
- Angular insists that we declare a ***target*** property to be an ***input*** property.
- If we don't, Angular rejects the binding and throws an error.
+ Angular requires that you declare a *target* property to be an *input* property.
+ Otherwise, Angular rejects the binding and throws an error.
.l-sub-section
:marked
- We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
- where we also explain why *target* properties require this special treatment and
+ Read more about input properties in the [Appendix: Input properties](../guide/attribute-directives.html#why-input)
+ section of the [Attribute Directives](../guide/attribute-directives.html) page.
+ This section also explains why *target* properties require this treatment and
*source* properties do not.
:marked
- There are a couple of ways we can declare that `hero` is an *input*.
- 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='.')
+ To declare that `hero` is an *input*,
+ annotate the `hero` property with the `@Input` decorator that you imported earlier.
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input', 'app/hero-detail.component.ts')(format='.')
.l-sub-section
:marked
- Learn more about the `@Input()` decorator in the
- [Attribute Directives](../guide/attribute-directives.html#input) chapter.
+ Read more about the `@Input()` decorator in
+ [this](../guide/attribute-directives.html#input) section of the
+
+ [Attribute Directives](../guide/attribute-directives.html) page.
.l-main-section
:marked
## Refresh the AppModule
- We return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`.
+ Return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`.
- We begin by importing the `HeroDetailComponent` so we can refer to it.
+ Import the `HeroDetailComponent` so you can refer to it.
-+makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import')
++makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import', 'app/app.module.ts')
:marked
- Then we add `HeroDetailComponent` to the `NgModule` decorator's `declarations` array.
- This array contains the list of all components, pipes, and directives that we created
- and that belong in our application's module.
+ Add `HeroDetailComponent` to the `NgModule` decorator's `declarations` array.
+ This array contains the list of all components, pipes, and directives that you created
+ and that belong in the application's module.
-+makeExample('toh-3/ts/app/app.module.ts', 'declarations')
++makeExample('toh-3/ts/app/app.module.ts', 'declarations', 'app/app.module.ts')
.l-main-section
:marked
## Refresh the AppComponent
:marked
- Now that the application knows about our `HeroDetailComponent`,
- find the location in the `AppComponent` template where we removed the *Hero Detail* content
+ Now that the app knows about the `HeroDetailComponent`,
+ find the location in the `AppComponent` template where you removed the *Hero Detail* content
and add an element tag that represents the `HeroDetailComponent`.
code-example(language="html").
<my-hero-detail></my-hero-detail>
.l-sub-section
:marked
- *my-hero-detail* is the name we set as the `selector` in the `HeroDetailComponent` metadata.
+ *my-hero-detail* is the name that's set as the `selector` in the `HeroDetailComponent` metadata.
:marked
- The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent`
- to the `HeroDetailComponent` element's `hero` property like this:
-code-example(language="html").
- <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+ To coordinate the two components, the `selectedHero` property of the `AppComponent` is bound
+ to the `HeroDetailComponent` element's `hero` property.
:marked
- The `AppComponent`’s template should now look like this
+ The `AppComponent`’s template should now look like this:
+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
:marked
- Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
- The detail should update every time the user picks a new hero.
+ Thanks to the binding, the `HeroDetailComponent` receives the hero name from the `AppComponent` and displays that hero's detail beneath the list.
+ The detail updates every time a user picks a new hero.
:marked
- ### It works!
- When we view our app in the browser we see the list of heroes.
- When we select a hero we can see the selected hero’s details.
-
- What's fundamentally new is that we can use this `HeroDetailComponent`
+ ### What's changed?
+ As in the [previous](./toh-pt2.html) page,
+ the list of heroes displays in the browser, and
+ when you select a hero, the selected hero’s details display.
+ However, now you can use the `HeroDetailComponent`
to show hero details anywhere in the app.
+ That is, you created the first reusable component.
- We’ve created our first reusable component!
-
- ### Reviewing the App Structure
- Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+ ### Review the app structure
+ Verify that you have the following structure after refactoring:
.filetree
.file angular-tour-of-heroes
@@ -214,8 +219,10 @@ code-example(language="html").
.file index.html
.file package.json
.file tsconfig.json
+// CF: Shouldn't styles.css and systemjs.config.js be listed as well?
+
:marked
- Here are the code files we discussed in this chapter.
+ Here are the code files discussed in this page.
+makeTabs(`
toh-3/ts/app/hero-detail.component.ts,
@@ -231,25 +238,24 @@ code-example(language="html").
.l-main-section
:marked
- ## The Road We’ve Travelled
- Let’s take stock of what we’ve built.
+ ## The road you’ve travelled
+ Here's what you achieved in this page:
- * We created a reusable component
- * We learned how to make a component accept input
- * We learned to declare the application directives we need in an Angular module. We
- list the directives in the `NgModule` decorator's `declarations` array.
- * We learned to bind a parent component to a child component.
+ * You created a reusable component.
+ * You learned how to make a component accept input.
+ * You learned to declare the required application directives in an Angular module. You
+ listed the directives in the `NgModule` decorator's `declarations` array.
+ * You learned to bind a parent component to a child component.
- Run the app.component.ts file to heroes.component.ts
- * `AppComponent` class to `HeroesComponent` (rename locally, _only_ in this file)
- * Selector `my-app` to `my-heroes`
+ Do the following:
+ * Rename the app.component.ts file as heroes.component.ts .
+ * Rename the `AppComponent` class as `HeroesComponent` (rename locally, _only_ in this file).
+ * Rename the selector `my-app` as `my-heroes`.
+makeExcerpt('app/heroes.component.ts (showing renamings only)', 'renaming')
:marked
- ## Create *AppComponent*
+ ### Create *AppComponent*
- The new `AppComponent` will be the application shell.
- It will have some navigation links at the top and a display area below for the pages we navigate to.
+ The new `AppComponent` is the application shell.
+ It will have some navigation links at the top and a display area below for the pages users navigate to.
- The initial steps are:
+ Perform these steps:
- * Create the file app/app.component.ts .
+ 1. Create the file app/app.component.ts .
* Define an exported `AppComponent` class.
* Add an `@Component` !{_decorator} above the class with a `my-app` selector.
* Move the following from `HeroesComponent` to `AppComponent`:
- * `title` class property
- * `@Component` template `