Ruivilela

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

Ruivilela

@Injectable()
export class PokedexService {
  private baseUrl: string ='https://pokeapi.co/api/v2/';
  
  constructor(private http: Http) { }
  
  getPokemon(index:number) {
    return this.http.get(`${this.baseUrl}pokemon/${index}`)
  }
}

Ruivilela

getPokemon(index:number){
   return this.http.get(`${this.baseUrl}${index}`)
              .subscribe(
                res => {return res.json().results}
              );
  }

Ruivilela

export class AppComponent{
  pokemon

  constructor(private pokedexService: PokedexService) {}

  ngOnInit(){}
}

Ruivilela

<h1>
  {{pokemon}}
</h1>

Ruivilela

export class AppComponent{
  pokemon

  constructor(private pokedexService: PokedexService) {}

  ngOnInit(){
    this.pokemon = this.pokedexService.getPokemon(1)
  }
}

Ruivilela

 ngOnInit(){
    this.pokemon = this.pokedexService.getPokemon(1); 
    console.log(this.pokedexService.getPokemon(1)); 
  }

Ruivilela

ngOnInit(){
    this.pokedexService.getPokemon(1).subscribe(
      result => {this.pokemon = result }
    ) 
  }

Ruivilela

export class Pokemon {

   constructor(
       public id:number, 
       public name:string,  
       public sprite:string){}
}

Ruivilela

@Injectable()
export class PokedexService {
  private baseUrl: string ='https://pokeapi.co/api/v2/';
  
  constructor(private http: Http) { }
  
  getPokemon(index:number) : Observable<Pokemon> {
    return this.http.get(`${this.baseUrl}pokemon/${index}`)
              .map((result:Response) => result.json())
              .map((res) => {return new Pokemon(index, res.name, res.sprites.front_default)})