fait jusqu'a Q14 + un peut de css

src/app/app.module.ts

@@ -1,23 +1,27 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-
+import {HttpClientModule } from '@angular/common/http'
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MyComponentComponent } from './my-component/my-component.component';
 import { FilterPokemonPipePipe } from './filter-pokemon--pipe.pipe';
+import { PokedetailComponent } from './pokedetail/pokedetail.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MyComponentComponent,
-    FilterPokemonPipePipe
+    FilterPokemonPipePipe,
+    PokedetailComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
+
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,18 +1,24 @@
-<input [(ngModel)]="id">
+<!--<input [(ngModel)]="id">-->
 
-<input readonly [(ngModel)]="id">
+<!--<input readonly [(ngModel)]="id">-->
 
 <BR>
 id : {{id}}
 <BR>
-    <input [(ngModel)]="searchPokeName">
-    <BR>
 
-<select [(ngModel)]="selectedPokeId">
+<input class="filter_pokedex" [(ngModel)]="searchPokeName">
+<select class="select_pokedex" [(ngModel)]="selectedPokeId">
     <option [value]="poke.id"
     *ngFor="let poke of pokes | filterPokemonPipe:'name':searchPokeName">
     {{poke.name}}</option>
 </select>
+<button (click)="go()"> GO </button>
+<BR>
+<div class="pokemon" *ngIf="pokeDetail">
+    <app-pokedetail [detail]="pokeDetail"></app-pokedetail>
+</div>
+
+
 <ul>
     <li *ngFor="let poke of pokes; index as i">{{poke.name}}</li>
-</ul>
+</ul>

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

@@ -1,20 +1,23 @@
 import { Component } from '@angular/core';
 //import { constructor } from 'jasmine';
-import { Pokemon } from '../pokemon';
+import { PokeDetail, Pokemon } from '../pokemon';
+import { PokeAPIServiceService } from '../poke-apiservice.service';
 
 @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.component.html',
-  styleUrl: './my-component.component.css'
+  styleUrl: './my-component.component.css',
+  providers: [PokeAPIServiceService] 
 })
 export class MyComponentComponent {
   id: string;
   selectedPokeId : string;
   searchPokeName: string;
-
+  pokeDetail : PokeDetail;
   pokes : Pokemon[] = [];
 
-  constructor(){
+  constructor(private pokeService: PokeAPIServiceService){
+    /*this.pokes.push(new Pokemon('1', "Bulbizarre"));
     this.pokes.push(new Pokemon('2', "Herbizarre"));
     this.pokes.push(new Pokemon('3', "Florizarre"));
     this.pokes.push(new Pokemon('4', "Salamèche"));
@@ -22,9 +25,23 @@ export class MyComponentComponent {
     this.pokes.push(new Pokemon('6', "Dracaufeu"));
     this.pokes.push(new Pokemon('7', "Carapute"));
     this.pokes.push(new Pokemon('8', "Carabaffe"));
-    this.pokes.push(new Pokemon('9', "Tortank"));
+    this.pokes.push(new Pokemon('9', "Tortank"));*/
   }
 
   ngOnInit(): void {
+    this.pokeService.getPokemons().subscribe((data)=>{
+      data.results.forEach((e,index) =>{
+        this.pokes.push(new Pokemon((index+1)+'', e.name));
+      })
+    }
+  );
+  };
+
+
+  go(){
+    this.id=this.selectedPokeId;
+    if (this.selectedPokeId != ''){
+      this.pokeService.getPokemonInfo(this.selectedPokeId).subscribe(data=> this.pokeDetail = data)
+    }
   }
 }

src/app/poke-apiservice.service.spec.ts

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

src/app/poke-apiservice.service.ts

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

src/app/pokedetail/pokedetail.component.html

@@ -0,0 +1,8 @@
+<div class="pokemonTitle">
+    #{{detail.id}} {{detail.name}}
+</div>
+<div class="pokemonDetail">
+    <ul>
+        <li *ngFor="let ability of detail.abilities">{{ability.ability.name}}</li>
+    </ul>
+</div>

src/app/pokedetail/pokedetail.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PokedetailComponent } from './pokedetail.component';
+
+describe('PokedetailComponent', () => {
+  let component: PokedetailComponent;
+  let fixture: ComponentFixture<PokedetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PokedetailComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PokedetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pokedetail/pokedetail.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input} from '@angular/core';
+import { PokeDetail } from '../pokemon';
+
+@Component({
+  selector: 'app-pokedetail',
+  templateUrl: './pokedetail.component.html',
+  styleUrl: './pokedetail.component.css'
+})
+export class PokedetailComponent {
+
+   @Input('detail')
+   detail: PokeDetail;
+}

src/app/pokemon.ts

@@ -1,3 +1,197 @@
+export interface PokeServiceRes {
+    count: number;
+    next: string;
+    previous: null;
+    results: IPokemon[];
+
+}
+
+export interface IPokemon {
+    name: string;
+    url: string;
+}
+
+
+export interface PokeDetail {
+    abilities:                Ability[];
+    base_experience:          number;
+    cries:                    Cries;
+    forms:                    Species[];
+    game_indices:             GameIndex[];
+    height:                   number;
+    held_items:               any[];
+    id:                       number;
+    is_default:               boolean;
+    location_area_encounters: string;
+    moves:                    Move[];
+    name:                     string;
+    order:                    number;
+    past_abilities:           any[];
+    past_types:               any[];
+    species:                  Species;
+    sprites:                  Sprites;
+    stats:                    Stat[];
+    types:                    Type[];
+    weight:                   number;
+}
+
+export interface Ability {
+    ability:   Species;
+    is_hidden: boolean;
+    slot:      number;
+}
+
+export interface Species {
+    name: string;
+    url:  string;
+}
+
+export interface Cries {
+    latest: string;
+    legacy: string;
+}
+
+export interface GameIndex {
+    game_index: number;
+    version:    Species;
+}
+
+export interface Move {
+    move:                  Species;
+    version_group_details: VersionGroupDetail[];
+}
+
+export interface VersionGroupDetail {
+    level_learned_at:  number;
+    move_learn_method: Species;
+    version_group:     Species;
+}
+
+export interface GenerationV {
+    "black-white": Sprites;
+}
+
+export interface GenerationIv {
+    "diamond-pearl":        Sprites;
+    "heartgold-soulsilver": Sprites;
+    platinum:               Sprites;
+}
+
+export interface Versions {
+    "generation-i":    GenerationI;
+    "generation-ii":   GenerationIi;
+    "generation-iii":  GenerationIii;
+    "generation-iv":   GenerationIv;
+    "generation-v":    GenerationV;
+    "generation-vi":   { [key: string]: Home };
+    "generation-vii":  GenerationVii;
+    "generation-viii": GenerationViii;
+}
+
+export interface Other {
+    dream_world:        DreamWorld;
+    home:               Home;
+    "official-artwork": OfficialArtwork;
+    showdown:           Sprites;
+}
+
+export interface Sprites {
+    back_default:       string;
+    back_female:        null;
+    back_shiny:         string;
+    back_shiny_female:  null;
+    front_default:      string;
+    front_female:       null;
+    front_shiny:        string;
+    front_shiny_female: null;
+    other?:             Other;
+    versions?:          Versions;
+    animated?:          Sprites;
+}
+
+export interface GenerationI {
+    "red-blue": RedBlue;
+    yellow:     RedBlue;
+}
+
+export interface RedBlue {
+    back_default:      string;
+    back_gray:         string;
+    back_transparent:  string;
+    front_default:     string;
+    front_gray:        string;
+    front_transparent: string;
+}
+
+export interface GenerationIi {
+    crystal: Crystal;
+    gold:    Gold;
+    silver:  Gold;
+}
+
+export interface Crystal {
+    back_default:            string;
+    back_shiny:              string;
+    back_shiny_transparent:  string;
+    back_transparent:        string;
+    front_default:           string;
+    front_shiny:             string;
+    front_shiny_transparent: string;
+    front_transparent:       string;
+}
+
+export interface Gold {
+    back_default:       string;
+    back_shiny:         string;
+    front_default:      string;
+    front_shiny:        string;
+    front_transparent?: string;
+}
+
+export interface GenerationIii {
+    emerald:             OfficialArtwork;
+    "firered-leafgreen": Gold;
+    "ruby-sapphire":     Gold;
+}
+
+export interface OfficialArtwork {
+    front_default: string;
+    front_shiny:   string;
+}
+
+export interface Home {
+    front_default:      string;
+    front_female:       null;
+    front_shiny:        string;
+    front_shiny_female: null;
+}
+
+export interface GenerationVii {
+    icons:                  DreamWorld;
+    "ultra-sun-ultra-moon": Home;
+}
+
+export interface DreamWorld {
+    front_default: string;
+    front_female:  null;
+}
+
+export interface GenerationViii {
+    icons: DreamWorld;
+}
+
+export interface Stat {
+    base_stat: number;
+    effort:    number;
+    stat:      Species;
+}
+
+export interface Type {
+    slot: number;
+    type: Species;
+}
+
+
 export class Pokemon {
 
 

src/styles.css

@@ -1 +1,26 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    font-family: Arial;
+}
+
+div.select_pokedex{
+    display: inline-block;
+}
+
+div.filter_pokedex{
+    display: inline-block;
+}
+
+div.pokemon{
+    display: inline-block;
+    align-items: center;
+}
+
+div.pokemonTitle{
+    display: inline-block;
+    font-size: 30px;
+}
+
+div.pokemonDetail{
+    display: inline-block;
+}