nerdic-coder

/* HeroesComponent's private CSS styles */
.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;

nerdic-coder

<ul class="heroes">
  {this.heroes.map((hero) =>
    <li>
      <span class="badge">{hero.id}</span> {hero.name}
    </li>
  )}
</ul>

nerdic-coder

<h2>{ this.selectedHero.name.toUpperCase() } Details</h2>
<div><span>id: </span>{this.selectedHero.id}</div>
<div>
  <label>name:
    <input type="text" value={this.selectedHero.name} onInput={(event) => this.handleChangeName(event)} placeholder="name" />
  </label>
</div>

nerdic-coder

{this.selectedHero ? (
      <div>
      <h2>{ this.selectedHero.name.toUpperCase() } Details</h2>
      <div><span>id: </span>{this.selectedHero.id}</div>
      <div>
        <label>name:
          <input type="text" value={this.selectedHero.name} onInput={(event) => this.handleChangeName(event)} placeholder="name" />
        </label>
      </div>
      </div>

nerdic-coder

import { render } from '@stencil/core/testing';
import { HeroDetails } from './hero-details';

describe('app-hero-details', () => {
  it('should build', () => {
    expect(new HeroDetails()).toBeTruthy();
  });

  describe('rendering', () => {
    beforeEach(async () => {

nerdic-coder

import { Component, Prop } from '@stencil/core';
import { Hero } from '../../models/hero';

@Component({
  tag: 'app-hero-details',
  styleUrl: 'hero-details.css'
})
export class HeroDetails {

  @Prop({ mutable: true }) private hero: Hero;

nerdic-coder

import { Observable } from 'rxjs';
import { of } from 'rxjs';

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

export class HeroService {

  private static _instance: HeroService;

nerdic-coder

  private heroService: HeroService;

  constructor() {
    this.heroService = HeroService.Instance;
  }

nerdic-coder

getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

nerdic-coder

  componentWillLoad() {
    this.getHeroes();
  }