Stencil — Tutorial: Tour of Heroes Part 4

When people assumes that you built the project with Angular.

If you just landed on this tutorial make sure to read part 1 to part 3 over here first:

If you have not done part 3 yet, you can pick up the code from here to follow along in this part 4 of the tutorial:


Now we will split up the heroes list and heroes details into two separate pages, we will also create a new dashboard view.

We will be using the stencil router to navigate between the pages.

Add routes

Our app already have a stencil router since before in the my-app.tsx , but it’s only been loading one page up until now.

Add a navigation link (stencil-route-link)

Add a

element and, within that, an element that, when clicked, triggers navigation to the Heroes component.

Add a dashboard view

Create a new folder dashboard inside the components folder and create the following files in the new folder,

  • dashboard.css
  • dashboard.spec.ts
  • dashboard.tsx

Replace the default file content in these three files as follows and then return for a little discussion:

The template presents a grid of hero name links.

  • The map repeater creates as many links as are in the component’s heroes array.
  • The links are styled as colored blocks by the dashboard.css.
  • The links don’t go anywhere yet but they will shortly.

This getHeroes reduces the number of heroes displayed to four (2nd, 3rd, 4th, and 5th).

Add the dashboard route

Add the following routes to the stencil-router in my-apps.tsx file:

This makes the dashboard the default page and also availabe on path /dashboard .

Navigating to hero details

Now we will make hero details into it’s own page, start with deleting the hero details from the heroes.tsx file.

Then add a hero details stencil route in my-apps.tsx :

The “:id” part defines that a parameter with a hero id will be at that position in the url.

Then we’ll add details links to the heroes in the dashboard with the “” as the id parameter,

We also add a similar link in the heroes list,

Extract the id route parameter

Now in the hero-details.tsx we need to catch the id from thr route parameter, we do this with the MatchResults from the stencil router package.

The end result will look something like this:

First we create a variable from the MatchResults then we will read the id value like this this.match.params.idin the newly created method getHero() .

Add HeroService.getHero()

Open HeroService and add this getHero() method:

Find the way back

By clicking the browser’s back button, you can go back to the hero list or dashboard view, depending upon which sent you to the detail view.

It would be nice to have a button on the HeroDetail view that can do that.

Add a go back button to the bottom of the component template and bind it to the component’s goBack() method.

Refresh the browser and start clicking. Users can navigate around the app, from the dashboard to hero details and back, from heroes list to the mini detail to the hero details and back to the heroes again.


This concludes part 4 of this series and next up is dealing with HTTP requests in StencilJS, coming soon!

You can review the full example of this tutorial on this Github tag:

Now continue on to the final part of this Stencil series: Stencil — Tutorial: Tour of Heroes Part 5

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at

Up ↑

%d bloggers like this: