Dans une application Angular, les components passent leur temps à s’échanger des données à l’aide de différents mécanismes d’interraction. Cet article est là pour faire le point sur les différents mécanismes :

• permettant de transmettre une donnée d’un component parent vers un component enfant.
• permettant de transmettre une donnée d’un component enfant vers un component parent.
• permettant d’accéder directement à une variable ou méthode enfant depuis le component parent dans un template.
• permettant d’accéder directement à une variable ou méthode enfant depuis le component parent dans la classe du component parent.
• permettant d’accéder au contenu d’un component.

 

Afin de reproduire les exemples qui vont suivre, vous pouvez initier un nouveau projet à l’aide de l’outil Angular-CLI comme ceci :

 

 

Faire circuler de l’information d’un parent vers un enfant

Comme cela a été vu dans l’article dans le data binding, il est possible de transmettre une donnée d’un parent vers un component enfant à l’aide du mécanisme de Property Binding. Nous allons prendre l’exemple d’une liste de personnes. Un composant parent possède la liste des personnes et souhaite afficher chaque ligne de cette liste dans un composant enfant. Commençons par créer le component enfant person :

 

 

Passons maintenant au code de notre component Root :

 

 

Puis, nous allons modifier notre component personne :

 

 

Nous arrivons donc bien à transmettre une donnée, en l’occurrence le tableau personnages, d’un component parent vers un component enfant comme l’atteste le résultat de notre code :

 

Pour aller un peu plus loin, nous avons la possibilité d’utiliser les getter setter TypeScript qui vont nous permettre de transformer une donnée. 

 

En TypeScript, il est possible de créer des getter setter sur une propriété privée comme c’est le cas en C# ou Java par exemple. Un cas simple d’implémentation en TypeScript donne ceci : 

 

class foo {
    private _bar:Boolean = false;
    get bar():Boolean {
        return this._bar;
    }
    set bar(theBar:Boolean) {
        this._bar = theBar;
    }
}

Lorsque nous transpilons cela en ES5, nous pouvons voir que nous utilisons la méthode Object.defineProperty() :

 

var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (theBar) {
            this._bar = theBar;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

Je vous propose donc d’utiliser le setter de notre tableau pour mettre en majuscule la première lettre du prénom et le getter pour mettre en majuscule la première lettre du nom. 

 

 

Ce code n’est évidemment pas des plus optimisés mais c’est juste pour l’exemple 🙂 mais on obtient quand même un résultat des plus sensationnels :

 

 

En conclusion, il faut retenir que le property binding permet de passer une donnée d’un component parent vers un component enfant. Il est également possible de profiter du Property Binding pour modifier une donnée.

 

 

La suite de cet article est disponible dans le livre Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes.

 

Le livre est disponible sur 

 

 

Quelques sujets abordés dans le chapitre complet :

• Recevoir un évènement d’un component enfant
• Agir sur une variable locale d’un component enfant
• @ViewChild, @ViewChildren, @ContentChild, @ContentChildren à la rescousse