Angular Academy · Leçon

ngOnInit et initialisation

Exécutez la logique de configuration au démarrage d’un composant.

ngOnInit et initialisation est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Que sont les hooks du cycle de vie ?

Les composants Angular ont un cycle de vie géré par le framework : création, détection des changements, rendu et destruction. Les hooks du cycle de vie vous permettent d'exécuter du code à des moments précis.

Découvrir OnInit

Le hook OnInit s'exécute une fois, après qu'Angular a défini les entrées du composant et rendu la vue initiale. C'est l'emplacement standard de la logique d'initialisation.

Implémenter OnInit

Implémentez l'interface OnInit et ajoutez la méthode ngOnInit. Angular l'appelle automatiquement.

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructeur et ngOnInit

Le constructeur s'exécute en premier, avant la définition des entrées, et ne devrait effectuer qu'une légère injection de dépendances. Utilisez ngOnInit pour la véritable configuration, une fois les entrées disponibles.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Les entrées sont prêtes dans ngOnInit

Lorsque ngOnInit s'exécute, toutes les propriétés @Input ont reçu leurs valeurs initiales transmises par le parent.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Charger des données dans ngOnInit

Un schéma courant consiste à charger des données depuis un service dans ngOnInit, puisque les entrées et les dépendances sont alors accessibles.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit s'exécute une fois

Contrairement aux hooks de détection des changements, ngOnInit s'exécute exactement une fois pendant le cycle de vie du composant, juste après le premier ngOnChanges.

Ordre par rapport à ngOnChanges

Si le composant possède des entrées, ngOnChanges se déclenche d'abord avec les valeurs initiales, puis ngOnInit s'exécute. Sans entrées, ngOnInit s'exécute tout de même.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Initialiser des formulaires

La création de formulaires réactifs est une tâche classique pour ngOnInit, car vous pouvez avoir besoin de services injectés pour configurer le formulaire.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Garder des constructeurs légers

Évitez les opérations lourdes dans le constructeur. Il s'exécute avant qu'Angular ne connecte les entrées, et les effets de bord qui s'y trouvent rendent les composants plus difficiles à tester et à prévoir.

Initialisation asynchrone

Vous pouvez appeler une logique asynchrone depuis ngOnInit, mais la méthode elle-même renvoie void ; utilisez subscribe ou des schémas asynchrones à l'intérieur.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Vérification rapide

Vérifiez votre compréhension de OnInit.

Récapitulatif

Le hook OnInit associé à ngOnInit s'exécute une fois après la liaison des entrées et convient parfaitement au chargement des données et à la configuration des formulaires. Gardez le constructeur léger et réservez l'initialisation à ngOnInit.

Questions Fréquemment Posées

La leçon « ngOnInit et initialisation » est-elle gratuite ?

Oui — le texte complet de « ngOnInit et initialisation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « ngOnInit et initialisation » ?

Exécutez la logique de configuration au démarrage d’un composant. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « ngOnInit et initialisation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy