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: https://nerdic-coder.com/2018/04/21/stencil-tutorial-tour-of-heroes/
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: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree/v3.0
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.
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)
element and, within that, an
element that, when clicked, triggers navigation to the
Add a dashboard view
Create a new folder
dashboard inside the
components folder and create the following files in the new folder,
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.
maprepeater creates as many links as are in the component’s
- The links are styled as colored blocks by the
- The links don’t go anywhere yet but they will shortly.
getHeroes reduces the number of heroes displayed to four (2nd, 3rd, 4th, and 5th).
Add the dashboard route
Add the following routes to the
This makes the dashboard the default page and also availabe on path
Navigating to hero details
Now we will make hero details into it’s own page, start with deleting the hero details from the
Then add a hero details stencil route in
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 “hero.id” 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
HeroService and add this
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
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: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree/v4.0
Now continue on to the final part of this Stencil series: Stencil — Tutorial: Tour of Heroes Part 5