nerdic-coder

getHeroes(): Observable<Hero[]> {
    return Observable.create((observer) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', CONFIG.SERVER_URL + 'heroes');
      xhr.onload = () => {
        if (xhr.status === 200) {
          this.messageService.add(`HeroService: fetched heroes`);
          observer.next(JSON.parse(xhr.responseText));
        }
        else {

nerdic-coder

export const CONFIG: Config =
  { SERVER_URL: 'http://localhost:3000/' };

class Config {
  SERVER_URL: string;
}

nerdic-coder

{
  "heroes": [
    {
      "id": 11,
      "name": "Mr. Nice"
    },
    {
      "id": 12,
      "name": "Narcos"
    },

nerdic-coder

<button onClick={() => this.goBack()}>go back</button>

nerdic-coder

  goBack(): void {
    window.history.back();
  }

nerdic-coder

getHero(id: number): Observable<Hero> {
  // TODO: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

nerdic-coder

import { Component, Prop } from '@stencil/core';
import { MatchResults } from '@stencil/router';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';

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

nerdic-coder

<li>
  <stencil-route-link url={`/detail/${hero.id}`}>
    <span class="badge">{hero.id}</span> {hero.name}
  </stencil-route-link>
</li>

nerdic-coder

<stencil-route-link url={`/detail/${hero.id}`} class="col-1-4">
  <div class="module hero">
    <h4>{hero.name}</h4>
  </div>
</stencil-route-link>

nerdic-coder

import { Component, State } from '@stencil/core';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';

@Component({
  tag: 'app-dashboard',
  styleUrl: 'dashboard.css'
})
export class Dashboard {