4. Un peu de pratique !

Bon passons à la pratique, et essayons d’enrichir quelque peu le composant app.component.ts de notre application. Je propose d’ajouter deux fonctionnalités que nous venons de voir :

• Injecter une liste de Pokémons dans le composant.
• Préparer une méthode qui devra gérer l’action lorsque l’utilisateur cliquera sur un Pokémon de cette liste.

Mais avant de vous laisser chercher tout seul, je me dois de vous donner deux choses :

• Une classe TypeScript permettant de modéliser un Pokémon.
• Un fichier de données contenant quelques Pokémons à injecter dans notre composant, à titre d’exemple.

Le modèle

Créer un fichier pokemon.ts dans le dossier app de notre projet, avec le code suivant :

export class Pokemon { 
 id: number; 
 hp: number; 
 cp: number; 
 name: string; 
 picture: string;  
 types: Array<string>; 
 created: Date; 
}

Cette classe a pour rôle de représenter un Pokémon dans notre application. Chaque Pokémon aura donc :

• Id : un identifiant unique sous forme de nombre.
• Hp : le nombre de points de vie du Pokémon.
• Cp : le nombre de dégâts d’un Pokémon.
• Name : un nom.
• Picture : l’url d’une image représentant le Pokémon.
• Types : un tableau contenant les types du Pokémon (Eau, Feu, Vol, etc…).
• Created : la date de création du Pokémon.

Les données

Maintenant, créons un fichier mock-pokemons.ts qui contiendra les données de plusieurs Pokémons. Ce fichier doit être placé dans le dossier src/app (le fichier est un peu long, mais il s’agit simplement de données mises à disposition pour notre application). Etant donné que nous n’allons pas modifier ce fichier dans la suite du cours, je vous propose de le récupérer directement :

import { Pokemon } from './pokemon';

export const POKEMONS: Pokemon[] = [
 {
  id: 1,
  name: "Bulbizarre",
  hp: 25,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
  types: ["Plante", "Poison"],
  created: new Date()
 },
 {
  id: 2,
  name: "Salamèche",
  hp: 28,
  cp: 6,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png",
  types: ["Feu"],
  created: new Date()
 },
 {
  id: 3,
  name: "Carapuce",
  hp: 21,
  cp: 4,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png",
  types: ["Eau"],
  created: new Date()
 },
 {
  id: 4,
  name: "Aspicot",
  hp: 16,
  cp: 2,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/013.png",
  types: ["Insecte", "Poison"],
  created: new Date()
 },
 {
  id: 5,
  name: "Roucool",
  hp: 30,
  cp: 7,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/016.png",
  types: ["Normal", "Vol"],
  created: new Date()
 },
 {
  id: 6,
  name: "Rattata",
  hp: 18,
  cp: 6,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/019.png",
  types: ["Normal"],
  created: new Date()
 },
 {
  id: 7,
  name: "Piafabec",
  hp: 14,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/021.png",
  types: ["Normal", "Vol"],
  created: new Date()
 },
 {
  id: 8,
  name: "Abo",
  hp: 16,
  cp: 4,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/023.png",
  types: ["Poison"],
  created: new Date()
 },
 {
  id: 9,
  name: "Pikachu",
  hp: 21,
  cp: 7,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png",
  types: ["Electrik"],
  created: new Date()
 },
 {
  id: 10,
  name: "Sabelette",
  hp: 19,
  cp: 3,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/027.png",
  types: ["Normal"],
  created: new Date()
 },
 {
  id: 11,
  name: "Mélofée",
  hp: 25,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/035.png",
  types: ["Fée"],
  created: new Date()
 },
 {
  id: 12,
  name: "Groupix",
  hp: 17,
  cp: 8,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/037.png",
  types: ["Feu"],
  created: new Date()
 }
];

Comme vous pouvez le constater, ce fichier ne fait qu’exporter la constante POKEMONS (à la ligne 3), qui contient des données nécessaires pour notre application.

Bon, maintenant vous avez tous les éléments nécessaires pour améliorer le composant app.component.ts de notre application. Pour rappel, voici ce que vous devriez pouvoir faire :

• Injecter une liste de Pokémons dans le composant.
• Préparer une méthode qui devra gérer l’action lorsque l’utilisateur cliquera sur un Pokémon de cette liste.

A vous de jouer maintenant ! 💪