Apprendre Angular en vidéos, ça te tente?
Angular la difference entre ngOnInit et constructor

Angular la difference entre ngOnInit et constructor

Nous nous retrouvons pour parler de deux notions essentielles. En effet, vous retrouverez la “function” ngOnInit et le constructor dans quasiment tous vos composants. Il est fortement recommandé de comprendre à quoi sert chacun deux. Mais aussi de voir les différences entre ces deux notions qui peuvent paraître très proches.

Il est assez courant de confondre les deux. Pour être honnête, j’avais beaucoup de mal à comprendre (au début) à quoi pouvait bien me servir ngOnInit alors que j’avais déjà un constructor dans mon composant.

On m’a parlé de lifecycle hooks concernant ngOnInit, mais j’ai pas bien compris

Afin que je puisse bien vous expliquer tout ça, il va falloir éclaircir certains points, notamment ce que sont les lifecycle hooks

La base sur les lifecycle hooks

Je vous rassure tout de suite, nous n’allons pas étudier précisément ce que sont les lifecycle hooks. C’est assez long.. Nous allons nous concentrer sur ce que c’est de façon globale.

La première chose à saisir se situe dans le fait que le framework Angular va gérer ses composants par cycles (lifecycle).

Le cycle de vie ou lifecycle d’un composant Angular peut se résumer en plusieurs étapes :

  1. Le composant est créé
  2. Les enfants de ce composant sont créés
  3. Angular va checker les éventuels changements de propriétés
  4. Le composant est détruit

C’est très synthétisé mais c’est suffisant pour se faire une idée de la gestion des composants par le framework.

Vous l’aurez compris ngOnInit fait partie de cette gestion de composant par Angular. Nous allons voir quelle est la différence majeure entre le constructor et la function ngOnInit au sein d’un composant.

C’est quoi la différence?

Hop hop, tu vas un peu vite, à quoi sert ngOnInit?

C’est donc une function proposée par le framework Angular. Cette function fait également partie intégrante du lifecycle hook d’un composant.

Elle est appelée quand le composant est …. initié (ouah le suspense). Plus précisément, quand les propriétés sont affichées et que les propriétés @Input sont initiés.

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

@Component({})
//la function ngOnInit fait partie de l'interface OnInit.
class ExampleALaConComponent implements OnInit {
    constructor() { }

    // Le framework Angular décide quand cette function est executée.
    ngOnInit() {
        console.log('Le composant a fini son initialisation');
    }
}

J’y vois un peu plus clair, tu peux nous parler de la notion de constructor maintenant?

Oui, tout à fait :). La méthode constructor n’a absolument rien à voir avec Angular. Il s’agit d’une méthode liée aux Classes TypeScript (plus exactement ES6). Vous l’aurez compris, le framework Angular n’a absolument aucun contrôle sur ce constructor et son appel. Voyons un exemple au sein d’une classe TypeScript :

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

@Component({})
class ExampleALaConComponent {
    //Angular n'a aucun contrôle sur ce dernier
    constructor() {
        console.log('Le constructor est appelé');
    }
}

Vous l’aurez surement compris, ngOnInit a été créé pour qu’Angular sache quand son composant est initialisé. Il ne dépend pas essentiellement du constructor de classe.

Quand utiliser ngOnInit?

Comme je l’ai dis plus tôt, ngOnInit est appellée uniquement quand Angular a fini d’initialiser votre composant.

Ce qui veut dire qu’elle ne sera appelée que quand les propriétés @Input() seront initialisées.

Les propriétés @Input seront tout le temps initialisées dans ngOnInit, contrairement à l’intérieur du constructor où elle ne seront pas encore définies. Illustrons ceci par un exemple :

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


@Component({})
class ExampleALaConComponent implements OnInit {
    @Input()
    pizza: Pizza;

    constructor(
    ) {
        // undefined (ma pizza n'est pas encore prête)
        console.log(this.pizza);
    }

    ngOnInit() {
        //Affiche bien mon objet pizza
        console.log(this.pizza);
    }
}

Vous l’aurez compris, ngOnInit vous assure que vos propriétés soient bien définies. Il s’agit de sa principale utilisation.

Quand utiliser le constructor?

Le seul intérêt d’utiliser le constructor dans vos classes est lors de l’injection de dépendance.

Si vous voulez en savoir beaucoup plus sur l’injection de dépendances, c’est par ici.

Souvenez-vous, le constructor est appelé par le moteur JavaScript. Par conséquent, il pourra dire au framework Angular de quelles dépendances, il va avoir besoin.

Un petit exemple pour illustrer tout ça :

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

@Component({})
class ExampleALaConComponent implements OnInit {
    @Input()
    pizza: Pizza;

    constructor(private pizzaService: PizzaService) {
    }
}

Cet article touche à sa fin :). J’espère avoir un peu demystifier  l’incomprehension entre ces deux notions.

Partagez l’article si vous l’avez aimé! A la prochaine.

Partagez, si vous aimez

One thought on “Angular la difference entre ngOnInit et constructor

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *