Stencil — Tutorial: Tour of Heroes Part 2

Picture is for comedic value, I have nothing against Angular.

If you just landed on this tutorial make sure to read part 1 over here first: https://nerdic-coder.com/2018/04/21/stencil-tutorial-tour-of-heroes/

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

Display a Heroes List

Now we will expand the Tour of Heroes app to display a list of heroes, and allow users to select a hero and display the hero’s details.

Create mock heroes

Create a file called mock-heroes.ts in the src/components/heroes/ folder. Define a HEROES constant as an array of ten heroes and export it. The file should look like this:

Displaying heroes

Open the Heroes component file and import the mock HEROES.

import { HEROES } from './mock-heroes';

Add a heroes property to the class that exposes these heroes for binding.

private heroes: Hero[] = HEROES;

List heroes with map JSX operator

Open the Heroes component file and make the following changes in the render return:

• Add an <h2> at the top,
• Below it add an HTML unordered list (<ul>)
• Insert an <li> within the <ul> that displays properties of a hero.
• Sprinkle some CSS classes for styling (you’ll add the CSS styles shortly).
• Add the map operator around the <li> element.

Make it look like this:

Might not be as clean looking as Angulars *ngFor, but here it’s very clear what’s a part of the loop.

Style the heroes

Add the following css code to the heroes.css file:

Just like in Angular stylesheets identified in the @Component metadata are scoped to that specific component.

Master/Detail

When the user clicks a hero in the master list, the component should display the selected hero’s details at the bottom of the page.

In this section, you’ll listen for the hero item click event and update the hero detail.

Add a click event binding

Add a click event binding to the <li> like this:

<li onClick={ () => this.onSelect(hero)}>

Here we use the default html onClick event instead of Angular’s (click), other then that it’s very much the same.

Add the click event handler

Rename the component’s hero property to selectedHero but don’t assign it. There is no selected hero when the application starts.

Add the following onSelect() method, which assigns the clicked hero from the template to the component’s selectedHero.

@State() private selectedHero: Hero;

onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

Update the details template

The template still refers to the component’s old hero property which no longer exists. Rename hero to selectedHero.

Hide empty details with the JavaScript ternary operator

After the browser refreshes, the application is broken.

Open the browser developer tools and look in the console for an error message like this:

TypeError: Cannot read property ‘name’ of undefined

What happened?

When the app starts, the selectedHero is undefined by design.

Binding expressions in the template that refer to properties of selectedHero — expressions like {this.selectedHero.name} — must fail because there is no selected hero.

The fix

The component should only display the selected hero details if the selectedHero exists.

In Stencil we fix this by wrapping the details in a ternary operator like this:

So the expression starts with checking if this.selectedHerois defined and if it is defined it renders the first parentheses after the question mark, if it’s not defined it shows the content of the second parentheses. If you wouldn’t want to show anything if selectedHero is undefined you could just set null inside the second parentheses.

Style the selected hero

That selected hero coloring is the work of the .selected CSS class in the styles you added earlier. You just have to apply the .selected class to the <li> when the user clicks it.

Add this conditional class attribute to the hero list <li>element:

<li class={(this.selectedHero === hero ? ‘selected’ : ‘’)} onClick={ () => this.onSelect(hero)}>

Master/Detail Components

Now we’re going to break out the hero details part into it’s own Stencil component, so it can be reusable for example.

Create a new folder hero-details inside the components folder and create the following files in the new folder,

• hero-details.css
• hero-details.spec.ts
• hero-details.tsx

Add the following code to the hero-details.spec.ts :

Remove the details part of the heroes component and add it to the hero-details component so it looks something like this:

Add the @Prop() hero property

Props are custom attribute/properties exposed publicly on the element that developers can provide values for. We add the mutable option to the Prop() to let the component know that it’s allowed to update the hero variable, when we edit the name in the input field for example.

Show the HeroDetails Component

Now simply to be able to show the hero details again on the heroes page, simply add the following html-tag to the heroes.tsx file below the heroes list,

<app-hero-details hero={this.selectedHero}></app-hero-details>

The two components will have a parent/child relationship. The parent Heroes component will control the child HeroDetails by sending it a new hero to display whenever the user selects a hero from the list.

Conclusion

That concludes part 2 of this tutorial. In the next part we will look at how we can add service providers to deliver the heroes data to the components.

You can check the result of this tutorial in the Github repository tag v2.0: https://github.com/nerdic-coder/stencil-tour-of-heroes/tree/v2.0

You can continue to part 3 here: https://nerdic-coder.com/2018/05/01/stencil-tutorial-tour-of-heroes-part-3/

Hope you have enjoyed this part and let me know in the comments what you think of this guide.