La méthode ngOnInit() est exécutée une seule fois, juste après qu'Angular a fini de créer le composant. C'est l'endroit parfait pour aller chercher des données (par exemple depuis une base de données ou une API).
Il sert uniquement à initialiser la classe et injecter des services (comme le Router ou HTTP). Il ne faut jamais faire de requêtes lourdes ici, car le composant n'est pas encore prêt visuellement.
Il s'exécute quand Angular a fini de préparer le composant et ses variables (Inputs). C'est le signal de départ officiel pour lancer vos requêtes et afficher vos données.
Sincere@april.biz
Shanna@melissa.tv
Nathan@yesenia.net
Julianne.OConner@kory.org
Lucio_Hettinger@annie.ca
Karley_Dach@jasper.info
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-ngoninit',
standalone: true,
imports: [CommonModule],
templateUrl: './ngoninit.component.html'
})
// N'oubliez pas d'ajouter "implements OnInit"
export class NgOnInitComponent implements OnInit {
users: any[] = [];
loading = true; // Indicateur pour le spinner
// 1. Le constructeur sert à injecter le service HTTP
constructor(private http: HttpClient) {}
// 2. ngOnInit se déclenche automatiquement au lancement du composant
ngOnInit() {
this.fetchUsers();
}
// 3. Notre méthode pour faire l'appel à l'API
fetchUsers() {
this.http.get<any[]>('https://jsonplaceholder.typicode.com/users').subscribe({
next: (data) => {
this.users = data; // On stocke les données
this.loading = false; // On cache le spinner
},
error: (error) => {
console.error('Erreur :', error);
this.loading = false;
}
});
}
}