11-3 Implémenter OnInit

Lors du chargement de la page projets, il nous faudra faire un appel d'API pour récupérer la liste de projets.

Mais comment savoir quand la composante ProjetsIndex est instanciée et prête à être utilisée?

Un composant a un cycle de vie avec plusieurs fonctions pouvant être appelées automatiquement à différents moments.

Vous pouvez en apprendre plus sur ce cycle de vie en visitant ce lien: https://angular.io/guide/lifecycle-hooks

Une de ces fonctions est ngOnInit() qui est appelée lors de l'initialisation du composant.

Implements OnInit

Pour ajouter l'appel automatique à la fonction d'initialisation, on doit premièrement spécifier que notre classe de composant implémente l'interface OnInit et donc qu'elle doit se conformer aux règles de cette interface.

1. Pour implémenter une interface, on ajoute implements suite au nom de la classe.

   export class ProjetsIndex implements {

2. Ensuite, commencez à taper OnInit et WebStorm pourra vous aider avec l'autocomplétion.

3. Assurez-vous de sélectionner OnInit

4. La classe devrait ressembler à ceci:

   export class ProjetsIndex implements OnInit{
     projets: string[] = [
       "Discreddit",
       "Organisation du Lan Party",
       "Organisation de la soirée jeu vidéo",
     ]
   }

   Vous aurez cependant l'erreur suivante:

   

5. Vous pouvez ouvrir l'aide contextuelle de WebStorm pour sélectionner Implement Interface 'OnInit'

Vous devriez maintenant avoir une classe de composante qui ressemble à ceci et possède la fonction ngOnInit().

src/app/features/projets/pages/projets-index.ts

export class ProjetsIndex implements OnInit{
  projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]

  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }
}

info

Cette fonction sera appelée par Angular lors de l'initialisation de la composante.

Par exemple, vous pourriez remplacer le "throw", qui lancera une erreur et plutôt ajouter un console.log et vérifier dans le navigateur que le message est bien affiché.

src/app/features/projets/pages/projets-index.ts

export class ProjetsIndex implements OnInit{
  projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]

  ngOnInit(): void {
    console.log('Je suis initialisé!');
  }
}