1. Qu’est-ce qu’un composant ?

Un composant est une classe, qui contrôle une portion de l’écran. Cette portion de l’écran contrôlée par le composant, on l’appelle une vue : une vue peut être l’ensemble de la page web, une fenêtre de tchat, une barre de navigation, etc… Cette vue est définie dans le template du composant.

On peut dire que : 1 composant = 1 classe + 1 vue.

On définit la logique d’un composant dans une classe ; c’est-à-dire ce qu’il faut pour faire fonctionner la vue. La classe d’un composant interagit avec la vue à travers des propriétés et des méthodes que nous allons voir.

Par exemple, imaginons un composant qui affiche tous les pokémons présents dans notre application, sous forme de liste. Ce composant aura donc une propriété pokémons contenant tous les pokémons à afficher :

import { Component, OnInit } from '@angular/core'; 

@Component({ 
 selector: 'app-root', 
 template: `<h1>Hello, Angular 2 !</h1>`, 
}) 
export class AppComponent implements OnInit { 
 // 1. La propriété pokémons est un tableau d'objet de type Pokemon. 
 private pokemons: Pokemon[]; 

 // 2. Initialisation de la propriété pokémons. 
 ngOnInit() { 
  this.pokemons = [ 
   { name: 'Bulbizarre', hp: 6 }, 
   { name: 'Salamèche', hp: 6 }, 
   { name: 'Carapuce', hp: 6 } 
  ]; 
 } 
}

Il s’agit d’un composant un peu plus complexe que le composant minimum que l’on avait vu au chapitre précédent, pour deux raisons :

• L’ajout d’une propriété pokemons : à la ligne 9, j’ai déclaré une propriété pokemons, et j’utilise le typage TypeScript pour indiquer que cette propriété devra contenir un tableau d’objet de type Pokemon. Cette propriété est privé et son usage est donc interne au composant AppComponent.
• J’initialise la propriété pokemons : à la ligne 13, dans une méthode nommée ngOnInit, j’initialise la propriété avec trois Pokémons, qui ont pour propriétés name et hp. (‘hp’ désigne le nombre de point de vie du Pokémon : Health Point).

D’accord pour la propriété pokemons, mais c’est quoi cette méthode ngOnInit, et ce nouvel import OnInit, et pourquoi tu implémentes cette fonction ?

Alors je ne vous ai pas tout dit. En réalité, ngOnInit n’est pas une simple méthode mais une méthode de cycle de vie du composant. Nous allons voir tout de suite de quoi il s’agit.