Comment utiliser ngOnInit sur Angular ?

ngOnInit est une méthode du cycle de vie d'un composant Angular. Elle est appelée une fois que tous les composants du composant ont été initialisés, c'est-à-dire que tous les data-bindings sont prêts. C'est le moment idéal pour effectuer des opérations de configuration sur le composant, comme par exemple récupérer des données à partir d'un service ou d'une API.

Voici comment utiliser ngOnInit dans un composant Angular :

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

@Component({
  selector: 'app-mon-composant',
  template: `
    <!-- Mettez ici le template de votre composant -->
  `,
  standalone: true
})
export class MonComposantComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    // Mettre ici le code à exécuter lors de l'initialisation du composant
  }
}

Vous pouvez mettre toutes les opérations de configuration nécessaires dans la méthode ngOnInit. Elle sera appelée une seule fois lors de l'initialisation du composant.

Quelle différence avec le constructeur ?

Le constructeur d'une classe est une méthode spéciale qui est appelée lorsque vous instanciez une nouvelle instance de cette classe. Elle est utilisée pour initialiser les variables d'instance et d'autres propriétés de l'objet.

En revanche, ngOnInit est une méthode du cycle de vie d'un composant Angular, qui est appelée une fois que tous les data-bindings du composant ont été initialisés.

Vous pouvez utiliser le constructeur pour initialiser les variables d'instance, tandis que vous pouvez utiliser ngOnInit pour effectuer des opérations de configuration sur le composant une fois qu'il est prêt à être utilisé, comme par exemple récupérer des données à partir d'un service ou d'une API.

INFO

Notez que le constructeur de la classe est appelé avant que ngOnInit ne soit appelé, donc vous ne pouvez pas vous attendre à ce que les data-bindings soient disponibles dans le constructeur. Si vous avez besoin d'accéder aux data-bindings dans le constructeur, vous pouvez utiliser une fonction de callback comme ngAfterViewInit au lieu de ngOnInit.