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(
-        (pokemon) => pokemon.id === +pokemonId
-      );
+      this.pokemon = this.pokemonService.getPokemonById(+pokemonId);
     }
   }