Angular : Quelle différence entre Constructor et OnInit ?

En Angular, on a souvent le choix entre faire une initialisation dans le constructor() ou dans le ngOnInit().
Et si tu choisis toujours l’un des deux "par défaut", il est temps de remettre ça à plat.

🚧 Le constructor() : pour préparer l’objet

Le constructeur est une fonction native TypeScript/JavaScript.
Il sert à initialiser l’objet : injecter des dépendances, déclarer des propriétés, ou effectuer une logique très simple de setup.

class App {
  constructor(private userGateway: UserGateway) {
    this.title = 'Bienvenue !';
  }
}

⚠️ Bien que l'injection de dépendance soit possible via le constructeur, le nouveau style guide sorti avec la v20 recommande d'utiliser inject().

✅ À faire dans le constructor :

• Injection de services, possible, mais préférer inject()
• Assignation simple de valeurs synchrones
• Initialisation de propriétés "statiques" ou de constantes
• utilisation de effect(), afterNextRender(), afterRender(), afterEveryRender()

❌ À éviter dans le constructor :

• Accès au DOM
• Appels réseau (même via un service)
• Logique métier nécessitant des données asynchrones

🔄 Le ngOnInit() : pour agir une fois le composant prêt

ngOnInit() est un hook de cycle de vie Angular, appelé après l’instanciation et après que les inputs du composant sont définis.

C’est là qu’on place :

• la logique qui dépend des inputs
• les appels à des services asynchrones
• les initialisations complexes

class App implements OnInit {
  @Input({ required: true }) idUser!: string;

  ngOnInit(): void {
    this.userGateway.getUser(this.idUSer).subscribe(user => this.user = user);
  }
}

✅ À faire dans le ngOnInit :

• Appels asynchrones (HTTP, stockage, etc.)
• Initialisation basée sur les @Input()

🧠 Alors… comment choisit-on ?

Pose-toi la question suivante :

Ai-je besoin d’un de mes inputs ?

• 👉 Si non, le constructor() suffit.
• 👉 Si oui, c’est dans le ngOnInit() que ça se passe.

🎬 En résumé

Et avec les Signals

Là la logique est différentes.

Souvent, on passe par des linkedSignal, computed ou effect. De fait, on a pas besoin de OnInit.

L'API Resource qui est actuellement en train de s'installer va également retirer du code des hooks de cycle de vie.

Il n'y a pas une bonne recette pour toutes les situations. Il faut choisir celle qui correspond le mieux à notre cas d'usage.

🚀 Envie d’aller plus loin avec Angular ?
📚 Découvre les modules de formation Angular sur EasyAngularKit pour progresser à ton rythme avec des cas concrets.
Apprends Angular pas à pas, avec de vrais projets, sans installation, ni configuration.