Fin module 10 : routes et modules

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

@@ -0,0 +1,56 @@
+<div *ngIf="pokemon" class="row">
+  <div class="col s12 m8 offset-m2">
+    <h2 class="header center">{{ pokemon.name }}</h2>
+    <div class="card horizontal hoverable">
+      <div class="card-image">
+        <img [src]="pokemon.picture" />
+      </div>
+      <div class="card-stacked">
+        <div class="card-content">
+          <table class="bordered striped">
+            <tbody>
+              <tr>
+                <td>Nom</td>
+                <td>
+                  <strong>{{ pokemon.name }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Points de vie</td>
+                <td>
+                  <strong>{{ pokemon.hp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Dégâts</td>
+                <td>
+                  <strong>{{ pokemon.cp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Types</td>
+                <td>
+                  <span
+                    *ngFor="let type of pokemon.types"
+                    class="{{ type | pokemonTypeColor }}"
+                    >{{ type }}</span
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td>Date de création</td>
+                <td>
+                  <em>{{ pokemon.created | date : "yyyy-MM-dd" }}</em>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-action">
+          <a (click)="goToPokemonList()">Retour</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { POKEMONS } from '../mock-pokemon-list';
+import { Pokemon } from '../pokemon';
+
+@Component({
+  selector: 'app-detail-pokemon',
+  templateUrl: './detail-pokemon.component.html',
+})
+export class DetailPokemonComponent implements OnInit {
+  constructor(private route: ActivatedRoute, private router: Router) {}
+  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
+      );
+    }
+  }
+
+  goToPokemonList() {
+    this.router.navigate(['/pokemons']);
+  }
+}