Fin section 11 : services

src/app/pokemon/detail-pokemon/detail-pokemon.component.ts

@@ -1,24 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { POKEMONS } from '../mock-pokemon-list';
 import { Pokemon } from '../pokemon';
+import { PokemonService } from '../pokemon.service';
 
 @Component({
   selector: 'app-detail-pokemon',
   templateUrl: './detail-pokemon.component.html',
 })
 export class DetailPokemonComponent implements OnInit {
-  constructor(private route: ActivatedRoute, private router: Router) {}
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private pokemonService: PokemonService
+  ) {}
   pokemonList: Pokemon[];
   pokemon: Pokemon | undefined;
 
   ngOnInit(): void {
-    this.pokemonList = POKEMONS;
     const pokemonId: string | null = this.route.snapshot.paramMap.get('id');
     if (pokemonId) {
-      this.pokemon = this.pokemonList.find(
+      this.pokemon = this.pokemonService.getPokemonById(+pokemonId);
-        (pokemon) => pokemon.id === +pokemonId
-      );
     }
   }
 

src/app/pokemon/list-pokemon/list-pokemon.component.ts

@@ -1,16 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { POKEMONS } from '../mock-pokemon-list';
 import { Pokemon } from '../pokemon';
+import { PokemonService } from '../pokemon.service';
 
 @Component({
   selector: 'app-list-pokemon',
   templateUrl: './list-pokemon.component.html',
 })
-export class ListPokemonComponent {
+export class ListPokemonComponent implements OnInit {
-  pokemonList: Pokemon[] = POKEMONS;
+  pokemonList: Pokemon[];
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private pokemonService: PokemonService) {}
+
+  ngOnInit() {
+    this.pokemonList = this.pokemonService.getPokemonList();
+  }
 
   goToPokemon(pokemon: Pokemon) {
     this.router.navigate(['/pokemon', pokemon.id]);

src/app/pokemon/pokemon.module.ts

@@ -6,6 +6,7 @@ import { PokemonTypeColorPipe } from './pokemon-type-color.pipe';
 import { ListPokemonComponent } from './list-pokemon/list-pokemon.component';
 import { DetailPokemonComponent } from './detail-pokemon/detail-pokemon.component';
 import { RouterModule, Routes } from '@angular/router';
+import { PokemonService } from './pokemon.service';
 
 const pokemonRoutes: Routes = [
   { path: 'pokemons', component: ListPokemonComponent },
@@ -20,5 +21,6 @@ const pokemonRoutes: Routes = [
     DetailPokemonComponent,
   ],
   imports: [CommonModule, RouterModule.forChild(pokemonRoutes)],
+  providers: [PokemonService],
 })
 export class PokemonModule {}

src/app/pokemon/pokemon.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { POKEMONS } from './mock-pokemon-list';
+import { Pokemon } from './pokemon';
+
+@Injectable()
+export class PokemonService {
+  getPokemonList(): Pokemon[] {
+    return POKEMONS;
+  }
+
+  getPokemonById(pokemonId: number): Pokemon | undefined {
+    return POKEMONS.find((pokemon) => pokemon.id === pokemonId);
+  }
+
+  getPokemonTypeList(): string[] {
+    const types: Set<string> = new Set();
+    POKEMONS.forEach((pokemon) => {
+      pokemon.types.forEach((type) => types.add(type));
+    });
+    return Array.from(types.values());
+  }
+}