toute les questions fini + ajout d'élément dans pokdetail

src/app/my-component/my-component.component.html

@@ -13,6 +13,8 @@ id : {{id}}
     {{poke.name}}</option>
 </select>
 <button (click)="go()"> GO </button>
+<button (click)="previous_pokemon()"> ⬆ </button>
+<button (click)="next_pokemon()"> ⬇ </button>
 <BR>
 <div class="pokemon" *ngIf="pokeDetail">
     <app-pokedetail [detail]="pokeDetail"></app-pokedetail>

src/app/my-component/my-component.component.ts

@@ -2,12 +2,13 @@ import { Component } from '@angular/core';
 //import { constructor } from 'jasmine';
 import { PokeDetail, Pokemon } from '../pokemon';
 import { PokeAPIServiceService } from '../poke-apiservice.service';
+import { PokeShareInfoService } from '../poke-share-info.service';
 
 @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.component.html',
   styleUrl: './my-component.component.css',
-  providers: [PokeAPIServiceService] 
+  providers: [PokeAPIServiceService]
 })
 export class MyComponentComponent {
   id: string;
@@ -16,7 +17,8 @@ export class MyComponentComponent {
   pokeDetail : PokeDetail;
   pokes : Pokemon[] = [];
 
-  constructor(private pokeService: PokeAPIServiceService){
+  constructor(private pokeService: PokeAPIServiceService,
+    private PokeShareInfoService: PokeShareInfoService){
     /*this.pokes.push(new Pokemon('1', "Bulbizarre"));
     this.pokes.push(new Pokemon('2', "Herbizarre"));
     this.pokes.push(new Pokemon('3', "Florizarre"));
@@ -42,6 +44,34 @@ export class MyComponentComponent {
     this.id=this.selectedPokeId;
     if (this.selectedPokeId != ''){
       this.pokeService.getPokemonInfo(this.selectedPokeId).subscribe(data=> this.pokeDetail = data)
+      //this.PokeShareInfoService.setValue(this.selectedPokeId);
     }
   }
+
+  previous_pokemon(){
+    var n_id: number = +this.id
+    if(n_id>1){
+      this.id = n_id-1+""
+    }
+    else{
+      this.id = ""+this.pokes.length
+    }
+    this.selectedPokeId = this.id
+    this.pokeService.getPokemonInfo(this.selectedPokeId).subscribe(data=> this.pokeDetail = data)
+
+  }
+  next_pokemon(){
+    var n_id: number = +this.id
+    if(n_id<this.pokes.length){
+      this.id = n_id+1+""
+    }
+    else{
+      this.id = "1"
+    }
+    this.selectedPokeId = this.id
+    this.pokeService.getPokemonInfo(this.selectedPokeId).subscribe(data=> this.pokeDetail = data)
+
+  }
+
+
 }

src/app/poke-apiservice.service.ts

@@ -1,9 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
-import { PokeDetail, PokeServiceRes } from './pokemon';
+import { PokeDetail, PokeServiceRes} from './pokemon';
+import { UrlCodec } from '@angular/common/upgrade';
 
-const url = 'https://pokeapi.co/api/v2/pokemon/';
+const url = 'https://pokeapi.co/api/v2/';
 
 @Injectable({
   providedIn: 'root'
@@ -15,10 +16,12 @@ export class PokeAPIServiceService {
 
   }
   getPokemons(): Observable<PokeServiceRes>{
-    return this.http.get<PokeServiceRes>(url);
+    return this.http.get<PokeServiceRes>(url + 'pokemon/');
   }
 
   getPokemonInfo(id:string): Observable<PokeDetail>{
-    return this.http.get<PokeDetail>(url + id + '/');
+    return this.http.get<PokeDetail>(url + 'pokemon/' + id + '/');
   }
+
+
 }

src/app/poke-share-info.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PokeShareInfoService } from './poke-share-info.service';
+
+describe('PokeShareInfoService', () => {
+  let service: PokeShareInfoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PokeShareInfoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/poke-share-info.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PokeShareInfoService {
+
+  constructor() { }
+
+  public stringVar = new Subject<string>;
+
+  setValue(newStringVar:string){
+    this.stringVar.next(newStringVar)
+  }
+
+  getObservable():Subject<string>{
+    return this.stringVar;
+  }
+}

src/app/pokedetail/pokedetail.component.html

@@ -1,8 +1,38 @@
-<div class="pokemonTitle">
+<div class="pokemonSprite">
-    #{{detail.id}} {{detail.name}}
+    <img src={{detail.sprites.front_default}}>
 </div>
 <div class="pokemonDetail">
-    <ul>
+    <div class="pokemonTitle">
-        <li *ngFor="let ability of detail.abilities">{{ability.ability.name}}</li>
+        #{{detail.id}} {{detail.name}}
-    </ul>
+    </div>
+    <div>
+        <li *ngFor="let type of detail.types">{{type.type.name}}</li>
+    </div>
+    <div>
+    </div>
+    <div>
+        <ul>
+            <li *ngFor="let ability of detail.abilities">{{ability.ability.name}}</li>
+        </ul>
+    </div>
+    <div>
+        <table class="sprites">
+            <tr>
+                <th>Male</th><th>Female</th>
+            </tr>
+            <tr>
+                <th><img src={{detail.sprites.front_default}}></th><th><img src={{detail.sprites.front_female}} alt="same"></th>
+            </tr>
+            <tr>
+                <th><img src={{detail.sprites.back_default}}></th><th><img src={{detail.sprites.back_female}} alt="same"></th>
+            </tr>
+            <tr>
+                <th><img src={{detail.sprites.front_shiny}}></th><th><img src={{detail.sprites.front_shiny_female}} alt="same"></th>
+            </tr>
+            <tr>
+                <th><img src={{detail.sprites.back_shiny}}></th><th><img src={{detail.sprites.back_shiny_female}} alt="same"></th>
+            </tr>
+
+        </table>
+    </div>
 </div>

src/app/pokedetail/pokedetail.component.ts

@@ -1,13 +1,24 @@
-import { Component, Input} from '@angular/core';
+import { Component, Input, OnInit} from '@angular/core';
 import { PokeDetail } from '../pokemon';
+import { PokeShareInfoService } from '../poke-share-info.service';
+import { PokeAPIServiceService } from '../poke-apiservice.service';
 
 @Component({
   selector: 'app-pokedetail',
   templateUrl: './pokedetail.component.html',
-  styleUrl: './pokedetail.component.css'
+  styleUrl: './pokedetail.component.css',
+  providers: [PokeAPIServiceService]
 })
-export class PokedetailComponent {
+export class PokedetailComponent implements OnInit {
+
+
 
    @Input('detail')
    detail: PokeDetail;
+
+   constructor(private PokeShareInfoService: PokeShareInfoService){
+    this.PokeShareInfoService.getObservable().subscribe(e=> console.log('e ' + e))
+   }
+  ngOnInit(): void {
+  }
 }

src/app/pokemon.ts

@@ -192,6 +192,8 @@ export interface Type {
 }
 
 
+
+
 export class Pokemon {
 
 

src/styles.css

@@ -14,13 +14,30 @@ div.filter_pokedex{
 div.pokemon{
     display: inline-block;
     align-items: center;
+    margin: 15px
 }
 
 div.pokemonTitle{
     display: inline-block;
     font-size: 30px;
+    vertical-align: top;
 }
 
 div.pokemonDetail{
     display: inline-block;
-}
+    vertical-align: top;
+}
+
+div.pokemonSprite{
+    image-rendering: pixelated;
+    display: inline-block;
+    vertical-align: top;
+}
+
+img{
+    image-rendering: pixelated;
+}
+
+table.sprites{
+    border-collapse: collapse;
+}