Ruivilela

const chunkArrayInGroups = (arr, size) => (  
  arr.reduce(
    (acc, cv, index) => (
      !((index / size) % 1)
        ? [a, [cv]]
        : [
          ...acc.slice(0, acc.length - 1),
          [
            ...acc[acc.length - 1],
            cv

Ruivilela

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1481924239005",
            "Effect": "Allow",
            "Action": [
                "cloudformation:CancelUpdateStack",
                "cloudformation:ContinueUpdateRollback",
                "cloudformation:CreateChangeSet",

Ruivilela

<div class="pokemon_frame" >
      <h3>
        #{{pokemon.id}}
      </h3>
      <img src="{{pokemon.sprite}}">
      <p>
        {{pokemon.name}}
      </p>
</div>   
 

Ruivilela

export class AppComponent {
  pokemon: Pokemon;
  
  constructor(private pokedexService: PokedexService) {}

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

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)})

Ruivilela

export class Pokemon {

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

Ruivilela

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

Ruivilela

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

Ruivilela

export class AppComponent{
  pokemon

  constructor(private pokedexService: PokedexService) {}

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

Ruivilela

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