Stencil — Tutorial: Tour of Heroes Part 3

Johan Axelsson
4 min readMay 1, 2018

If you just landed on this tutorial make sure to read part 1 and part 2 over here first: https://medium.com/@nerdic.coder/stencil-tutorial-tour-of-heroes-832a09ef3d82

If you have not done part 1 and 2 yet, you can pick up the code from here to follow along in this part 3 of the tutorial: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree/v2.0

Robin the hidden hero, just like service classes below the components surface!

Services

In this tutorial, we’ll create a HeroService that all application classes can use to get heroes. Instead of creating that service with new or relying on Angular dependency injection, we will create a static instance of the HeroService inside itself that will be used to inject it into the Heroes component constructor.

Services are a great way to share information among classes that don’t know each other.

Create the HeroService

First create a new folder under under src named services. Then create the file hero.service.ts. The HeroService class should look like this:

Instance services

--

--

Johan Axelsson

Frontend App Developer from Åland. Will write stories about anything I find valuable for other developers. Ranging from dev tools, frameworks and techniques.