` elements as we’re going to custom style them.
+ +makeExample('toh-4/ts/app/index.pt4.html','ng-for')
+ :marked
+ We’ve been down this road before. We are using the `ng-for` directive, so we have to declare it in the component. Let’s do that now by first importing `CORE_DIRECTIVES`. (Remember that `CORE_DIRECTIVES` is a convenience array containing the most common directives such as `ng-for`.)
+ ```
+ import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
+ ```
+ Then we declare the `CORE_DIRECTIVES` to the component.
+ ```
+ directives: [CORE_DIRECTIVES]
+ ```
+ ### Using the Shared HeroService
+ We just iterated over a list of heroes, but we don’t have any heroes in the `DashboardComponent`. We do have a `HeroService` that provides heroes. In fact, we already used this service in the `HeroComponent`. Let’s re-use this same service for the `DashboardComponent` to get a list of heroes.
+
+ We’ll create a `heroes` property in our `DashboardComponent`.
+ ```
+ public heroes: Hero[];
+ ```
+ And we import the `Hero`
+ ```
+ import {Hero} from './hero';
+ ```
+ #### Injecting a Service
+ We’ll be needing the `HeroService`, so let’s import it and inject it into our `DashboardComponent`. Here we import it.
+ ```
+ import {HeroService} from './hero.service';
+ ```
+ And here we inject it into our component’s constructor.
+ ```
+ constructor(private _heroService: HeroService) { }
+ ```
+ #### Getting the Heroes on Initialization
+ We want our heroes to be loaded when the component is initialized, just like we did in the `HeroesComponent`. We’ll tackle this the same way, by using the onInit Lifecycle hook.
+
+ We can implement the `OnInit` interface and code the `onInit` method.
+ ```
+ export class DashboardComponent implements OnInit {
+ ```
+ Here we implement the `onInit` method to get our heroes, again just like we did for the `HeroesComponent`.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','oninit')
+ :marked
+ Notice we did not have to know how to get the heroes, we just needed to know the method to call from the `HeroService`. This is an advantage of using shared services.
+
+ When we view our app in the browser we see the dashboard light up with all of our heroes. This isn’t exactly what we want so let’s trim that down to the top four heroes.
+
+ ### Slicing with Pipes
+ Our requirement is to show the top four heroes. If only we had something that would automatically get a subset of the data. Well, we do! They are called Pipes.
+
+ Angular has various built-in pipes that make formatting and filtering data easy. We’ll take advantage of a pipe named `slice` to get a slice of our heroes array.
+ ```
+
+ ```
+ After the `ng-for` we added a pipe character and then the `slice` pipe. We tell the `slice` pipe to start at the 0th item in the array and get four items.
+ .l-sub-section
+ :marked
+ Learn more about Pipes in the chapter [Pipes](../guide/pipes.html)
+ :marked
+ When we view our app we now see the first four heroes are displayed.
+
+ ### Heroes with Style
+ Our creative designers have added a requirement that the dashboard should show the heroes in a row of rectangles. We’ve written some CSS to achieve this along with some simple media queries to achieve responsive design.
+
+ We could put the CSS in the component, but there are over 30 lines of CSS and it would get crowded fast. Most editors make it easier to code CSS in a *.css file too. Fortunately, we can separate the styles into their own file and reference them.
+
+ #### Adding the Dashboard’s CSS File
+ Let’s create a file to hold the `DashboardComponent`’s CSS. We’ll name it `dashboard.component.css` and put it in the `app` folder.
+
+ Now let’s add the following CSS to the file.
+ +makeExample('toh-4/ts/app/index.pt4.html','css')
+ :marked
+ We need to reference the file from our component so the styles will be applied properly. Let’s add this reference to the component’s `styleUrls` property.
+ ```
+ styleUrls: ['app/dashboard.component.css'],
+ ```
+ The `styleUrls` property is an array, which we might guess suggests that we can add multiple styles from different locations. And we would be right! In this case we have one file, but we could add more for our component if needed.
+
+ #### Template Urls
+ While we are at it, let’s move our HTML for the `DashboardComponent` to its own file. We’ll create a file named `dashboard.component.html` in the `app` folder and move the HTML there.
+ We need to reference the the template, so let’s change our component’s `template` property to `templateUrl` and set it to the location of the file.
+ ```
+ template: 'app/dashboard.component.html',
+ ```
+ Notice we are now using single quotes and not the back-ticks since we only have the need for a single line string.
+
+ #### Applying the Styles to Our Template
+
+ Now that we have some style, let’s take advantage of it by applying it to our template. Our template should now look like this:
+ +makeExample('toh-4/ts/app/index.pt4.html','template-styled')
+ :marked
+ When we view our app in the browser it now shows our dashboard with our four top heroes in a row.
+
+ ## Styling the Navigation Links
+ Our creative design team requested that the navigation links also be styled. Let’s make the navigation links look more like selectable buttons.
+
+ ### Defining Styles for Navigation Links
+ Let’s add the following styles to our `AppComponent`’s `styles` property. We’ll define some classes named `router-link` that style the default, active, visited and hover selectors. The active selector changes the color of the link to make it easy to identify which link is selected.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','styles')
+ :marked
+ This time we define the styles in our component because there are only a few of them.
+
+ ### Applying Styles to the Navigation Links
+ Now that we have styles for our navigation links, let’s apply them in the `AppComponent` template. When we are done, our component will look like the following:
+ +makeExample('toh-4/ts/app/index.pt4.html','styled-nav-links')
+ :marked
+ #### Where Did the Active Route Come From?
+ The Angular Router makes it easy for us to style our active navigation link. The `router-link-active` class is automatically added to the Router’s active route for us. So all we have to do is define the style for it.
+
+ Sweet! When we view our app in the browser we see the navigation links are now styled, as are our top heroes!
+ figure.image-display
+ img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
+ :marked
+ ## Add Route to Hero Details
+ We can navigate between the dashboard and the heroes view, but we have a requirement from our users to be able to select a hero from either of those views and go directly to the selected hero’s details. Let’s configure a route to go directly to the `HeroDetailComponent` passing the hero’s id as a parameter.
+
+ ### Configuring a Route with a Parameter
+ We’ve already added a few routes to the `routes.config.ts` file, so it’s natural that we’d start there to add the route to go to the `HeroDetailComponent`. Let’s start by adding the import statement for the component.
+ +makeExample('toh-4/ts/app/route.config.pt4.ts','route-parameter-import')
+ :marked
+ Now we add a route for the details to the `Routes` object.
+ +makeExample('toh-4/ts/app/route.config.pt4.ts','route-parameter-detail')
+ :marked
+ The route will lead to the `HeroDetailComponent`, passing along the value for the hero’s id. The routing configuration identifies parameters as parts of the path that are prefixed with a `:` such as `:id`.
+
+ ### Receiving a Parameter
+ We want to navigate to the `HeroDetailComponent`, so let’s modify it to accept the `id` parameter. We import the `RouteParams` so we can access the parameter.
+ We assign our `AppComponent` a selector of `my-app`.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','import-params')
+ :marked
+ Now we inject the `RouteParams` into the `HeroDetailComponent` constructor.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','inject-routeparams')
+ :marked
+ We want to immediately access the parameter, so let’s implement the `OnInit` interface and its `onInit` method.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','access-params')
+ :marked
+ And let’s not forget to import `OnInit`.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','import-onit')
+ :marked
+ Using the `onInit`method, we can grab the parameter as soon as the component initializes. We’ll access the parameter by name and later we’ll get the hero by its `id`.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-id-param')
+ :marked
+ Our `HeroDetailComponent` is already used in the `HeroesComponent`. When we select a hero from the list we are passing the hero object from the list to the `HeroDetailComponent`. We want this component to support that functionality or be able to accept the hero’s id. Let’s revise the logic in the `onInit` to handle this.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-hero-id')
+ :marked
+ Our component will first check if it has a hero. If it doesn’t it will then check for the routing parameter so it can get the hero.
+ .l-sub-section
+ :marked
+ Learn more about RouteParams in the chapter [Router](../guide/router.html)
+ :marked
+ Getting the Hero
+ When we pass the id to the `HeroDetailComponent` we need to go get the hero from our `HeroService`. Let’s import the `HeroService` so we can use it to get our hero.
+ +makeExample('toh-4/ts/app/bootstrap.pt4.ts','import-hero-service')
+ :marked
+ And then we inject the `HeroService` into the constructor.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','inject-hero-service')
+ :marked
+ We then stub out the call to the `HeroService` to get the hero by the hero’s id. But wait a second, we don’t have a way to get the hero by id … yet.
+
+ Our `HeroService` is the right place to get a single hero. We’ll create a method named `getHero` that will accept a parameter, find the hero, and return the hero in a promise.
+
+ We add this method to the `HeroService`.
+ +makeExample('toh-4/ts/app/hero.service.pt4.ts','get-hero-method')
+ :marked
+ Then we go back to our `HeroDetailComponent` and we can call the `getHero` method.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-hero-method')
+ :marked
+ We grab the hero and set it to the local `hero` property. Now we have everything in place to receive the parameter.
+
+ ### Select a Hero on the Dashboard
+ When a user selects a hero in the dashboard, we want to route to the details. Let’s open our dashboard’s template and add a click event to each hero in the template.
+ +makeExample('toh-4/ts/app/index.pt4.html','select-hero-click-event')
+ :marked
+ The click event will call the `gotoDetail` method in the `DashboardComponent`. We don’t have that method yet, so let’s create it. We’ll want to use the router to navigate to the details route we created. So we have to import the router, and while we are at it, we’ll import the `Routes` object we created that describe our routes.
+ +makeExample('toh-4/ts/app/bootstrap.pt4.ts','import-router')
+ :marked
+ Now we can write our method to navigate to the route and pass the parameter. We’ll use the router’s `navigate` method and pass an array that has 2 parameters. The first is the name of the route (the `as` property in the `RouteConfig`). The second is an object with the parameters and values.
+ +makeExample('toh-4/ts/app/route.config.pt4.ts','router-navigate-method')
+ :marked
+ Now when we view our app in the browser and select a hero from the dashboard, we go directly to the hero’s details!
+ .l-sub-section
+ :marked
+ Learn more about RouteParams in the chapter [Router](../guide/router.html)
+ :marked
+ ### Select a Hero on the HeroesComponent
+ When a user selects a hero in the dashboard, we go to the details. But we also want this to happen from the `HeroesComponent`. Let’s add the same changes to the `HeroesComponent` that we made to the dashboard.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','select-hero')
+ :marked
+ The requirement here is to show the hero when selected and allow the user to the details via a button. So when a user selects a hero we want to show the hero’s name and provide a button to navigate to the details.
+
+ Let’s open the `HeroesComponent`, remove the `my-hero-detail` component, and change the template to display the hero’s name instead.
+ +makeExample('toh-4/ts/app/index.pt4.html','display-hero-name')
+ :marked
+ We also added a button with a click event that will call our `gotoDetail` method in our `HeroesComponent`.
+
+ Notice we also used the `uppercase` pipe to format the selected hero’s name. Pipes are extremely helpful at formatting and filtering.
+ .l-sub-section
+ :marked
+ Learn more about Pipes in the chapter [Pipes](../guide/pipes.html)
+ :marked
+ When we view the app in our browser we can now navigate from the dashboard or the heroes component directly to the selected hero’s details!
+
+ ### Cleaning Up Templates and Styles
+ We’ve added a lot of HTML and CSS in our template and styles, respectively, in the `HeroesComponent`. Let’s move each of these to their own files.
+
+ We move the HTML for the `HeroesComponent` template to `heroes.component.html`. Then we reference the file in the component’s `templateUrl` property.
+
+ Now our `HeroesComponent` looks much cleaner and easier to maintain since our template and styles are in another file.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','reference-heroes-component')
+ :marked
+ We’ll also move the HTML out of the `HeroDetailComponent` and into its own file named `hero-detail.component.html`. Then we reference the file from the `templateUrl` property.
+ +makeExample('toh-4/ts/app/app.component.pt4.ts','reference-hero-detail-component')
+ :marked
+ ### Adding Styles to the App
+ When we add styles to a component we are making it easier to package everything a component needs together. The HTML, the CSS, and the code are all together in one convenient place. However we can also add styles at an app level outside of a component.
+
+ Our designers just gave us a few more basic styles to apply to our entire app. Let’s add some CSS in a file `styles.css` to the `src` folder to style the app’s basic elements.
+ +makeExample('toh-4/ts/app/index.pt4.html','basic-styles')
+ :marked
+ And let’s reference the stylesheet from the `index.html`.
+ +makeExample('toh-4/ts/app/index.pt4.html','stylesheet')
+ :marked
+ When we view our app in the browser we can see everything still works as expected!
+
+ ### Reviewing the App Structure
+ Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+ code-example.
+ angular2-tour-of-heroes
+ |---- node_modules
+ |---- app
+ | |---- app.component.ts
+ | |---- boot.ts
+ | |---- dashboard.component.css
+ | |---- dashboard.component.html
+ | |---- dashboard.component.ts
+ | |---- hero.ts
+ | |---- hero-detail.component.html
+ | |---- hero-detail.component.ts
+ | |---- hero.service.ts
+ | |---- heroes.component.css
+ | |---- heroes.component.html
+ | |---- heroes.component.ts
+ | |---- mock-heroes.ts
+ | |---- route.config.ts
+ |---- index.html
+ |---- styles.css
+ |---- tsconfig.json
+ |---- package.json
+
+ .l-main-section
+ :marked
+ ## Recap
+
+ ### The Road We’ve Travelled
+ Let’s take stock in what we’ve built.
+ - We added the router to navigate between different components and their templates
+ - We learned how to create router links to represent navigation menu items
+ - We extended a component to either accept a hero as input or accept a router parameter to get the hero
+ - We extended our shared service by adding a new method to it
+ - We added the `slice` pipe to filter the top heroes, and the `uppercase` pipe to format data
+
+ ### The Road Ahead
+ Our Tour of Heroes has grown to reuse services, share components, route between components and their templates, and filter and format data with pipes. We have many of the foundations to build an application. In the next chapter we’ll explore how to replace our mock data with real data using http.
\ No newline at end of file
diff --git a/public/resources/images/devguide/toh/dashboard-top-heroes.png b/public/resources/images/devguide/toh/dashboard-top-heroes.png
new file mode 100644
index 0000000000..e0cc2c9d72
Binary files /dev/null and b/public/resources/images/devguide/toh/dashboard-top-heroes.png differ
diff --git a/public/resources/images/devguide/toh/heroes-list-3.png b/public/resources/images/devguide/toh/heroes-list-3.png
new file mode 100644
index 0000000000..84a0b81900
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-3.png differ