5. Correction

Alors vous avez réussi ? Vous n’avez plus d’erreurs dans la console ? 😉

Je vous propose tout de même une correction, afin que nous ayons la même base pour la suite. Recopiez donc le code ci-dessous, puis analysons l’ensemble :

import { Component, OnInit } from '@angular/core'; 
import { Pokemon } from './pokemon'; 
import { POKEMONS } from './mock-pokemons'; 

@Component({ 
 selector: 'app-root', 
 template: `<h1>Pokémons</h1>`, 
}) 
export class AppComponent implements OnInit {
  pokemons: Pokemon[] = null;
  ngOnInit() { 
    this.pokemons = POKEMONS; 
  } 
  selectPokemon(pokemon: Pokemon) { 
    console.log('Vous avez selectionné ' + pokemon.name); 
  } 
}

Voici ce qui a été modifié, par rapport au composant qui affichait simplement « Hello, World ! » :

• Trois importations supplémentaires, dans les trois premières lignes : importation de l’interface OnInit, récupération du modèle représentant un Pokémon, afin de pouvoir typer nos variables, et ajout de la constante POKEMONS, qui contient les données de différents Pokémons.
• Modification du template à la ligne 7, en mettant Pokémons comme titre, à la place de « Hello, World ! ».
• Déclaration d’une propriété à la ligne 10 : pokemons qui doit contenir la liste des Pokémons à afficher à l’utilisateur.
• La méthode d’initialisation ngOnInit à la ligne 11, qui a pour fonction d’initialiser la propriété pokemons du composant avec les valeurs importées depuis mock-pokemons.ts.
• La méthode selectedPokemon à la ligne 14, qui permet d’afficher dans la console le nom du Pokémon sélectionné par l’utilisateur.

Nous voici avec un composant presque prêt, mais il lui manque encore une chose pour pouvoir fonctionner. C’est pourquoi nous ajouterons un template à notre composant dans le prochain chapitre !

Pour l’instant, ce composant ne fait rien d’autre que d’afficher un titre, nous devons le coupler à un template pour avoir un ensemble fonctionnel !