Welcome

Angular-Tuto.com

Angular-Tuto.com

Décorateur Angular 7

Décorateurs dans Angular 7

Introduction

Le sujet qu’on va aborder c’est la communication inter-components. Elle permet d’assurer les canaux de communication entre les différents components, dans les deux sens (du fils vers parent et vis versa).

Dans ce cadre, on va appliquer plusieurs techniques qui nous permettre de mieux organiser notre application Angular.

La question qui se pose:
Comment deux components peuvent se communiquer ? comment, le deuxième component peut répondre à la demande du premier ? le deuxième component, comment peut-il envoyer des objets en tant que réponse à la demande.

Ainsi nous avons besoin des décorateurs. On va utiliser les décorateurs dans le cadre de la communication inter-components et pour d’autres besoins.

Historique

Au moment de la préparation du framework Angular 2, la communauté ECMAScript n’a pas encore introduit la notion des decorators. Mais Google (Fondateur d’angular), en a besoin. Donc ils l’ont utilisé, malgré tout.

D’une manière simplifiée “Decorators” sont des fonction préfixées par le symbole “@”. Les Decorators permettent d’ajouter une condition ou une information sur (classe, propriété, méthode, ou paramètre) auquel il est appliqué.

On a déjà utilisé le décorateur @component qui permet d’ajouter des informations sur le component comme le ‘selector’, templateUrl, styleUrls ….
Décorateur Angular 7

@Input decorator

On utilise @input pour dire que cette propriété est une entrée (input) pour ce component. Imaginez que le component est une machine qui a besoin des entrées pour nous retourner des sorties ou même les mêmes entrées mais, un peu modifiées.

Donc on déclare une propriété. Puis on ajoute le décorateur @input pour dire que notre component peut recevoir des messages à travers cette propriété.

Donc si un component A, possède une propriété décorée par un input, alors un component B peut communiquer avec à en modifiant la valeur de la propriété.

@input, peut décorer n’importe quel type de propriété (number, string, array ou même un objet défini par le développeur).

On peut utiliser les alias afin de donner une nomination spécifique à l’input chez l’autre component.

@Output decorator

le décorateur @Output est très similaire à l’input sauf que l’output est utilisé dans l’autre sens de la communication. c.a.d que le deuxième component peut répondre le premier component.

Un point particulier avec ce décorateur: Il est toujours bindé à une propriété de type “TypeEventEmitter”.

la propriété output peut utiliser les alias.

Exemple:
la propriété suivante “Prop” est visible chez le component émetteur avec le nom suivant “MaProp”. Notez bien que cette propriété utilise EventEmitter pour retourner un string.
Décorateur Angular 7

N'oubliez pas de faire des faires les importation de Input, Output et EventEmitteur à partire de la bibliothèque Angular core.
Décorateur Angular 7

Exemple 1

On va créer une application qui contient deux components qui échangent entre eux par messages. Un enseignant qui pose une question à un étudiant ainsi l’etudiant répond à/aux questions.

On commence par créer les components Enseignant et Étudiant
Décorateur Angular 7

On commence par envoyer la question de l’enseignant à son étudiant. On attend le resultat suivant:
Décorateur Angular 7

En fait, la question de l’enseignant qui est un membre du component parent est passée à l'intérieur du component récepteur "Etudiant" (En jaune).

Etape 0:
Décorateur Angular 7

Etape 1:
Créer le component parent (Enseignant). Dans la définition du component on ajoute quelques propriétés (nom de l’enseignant, sa question et la bonne réponse attendue):
Décorateur Angular 7

et dans la template, on remarque bien qu’on appelle le component Etudiant (voir ligne 11). On déduit que le deuxième component contient une propriété “QuestiondeMonEnseignant” qui est blindée [] à la propriété Question du component enseignant.

- La propriété “QuestiondeMonEnseignant” appartient au component Etudiant
- La propriété “Question” appartient au component Etudiant
- On passe la valeur de “Question” à “QuestiondeMonEnseignant”
Décorateur Angular 7

Etape2:
On commence par faire les importations. Puis on créer une propriété NomEtudiant qui contient le nom de l'étudiant et l’autre propriété “QuestiondeMonEnseignant” dont on a parlé, tout à l’heure.
Décorateur Angular 7

Exemple 2

Exemple 2 est la suite du premier exemple. Ainsi, on va implémenter le code nécessaire pour que l'étudiant répond à la question. Puis l’enseignant va recevoir cette réponse et évalue si elle est juste ou non. On attend quelque chose comme suivant:

Décorateur Angular 7

Et comme ça, la boucle est fermée. L’enseignant pose sa question. Puis l’etudiant donne sa reponse. Et finalement, L’enseignant fait la correction. On commence par modifier la définition du component Enseignant.

On ajoute les propriétés suivantes: “ReponseEtudiant” et “IsBonneReponse” et une fonction “saveData(number)” qui permet récupérer la valeur saisie dans le champ text puis elle évalue “IsBonneReponse”.
Décorateur Angular 7

Sur la template du component Enseignant: N’oubliez pas que ce component attend le retour du component Etudiant. Pour ceci, on ajoute “(ReponseEvent) = "saveData($event)"”.

On constate que “ReponseEvent” est un EventEmitter dans le component Etudiant. Puis on appelle la fonction saveData() qui récupère la réponse de l'étudiant et l’affiche.
Décorateur Angular 7

Maintenant, on passe au component “Etudiant” pour voir comment on récupère les inputs saisis.On note bien qu’à la ligne 6 de la template, la propriété “ReponseSaisie” reçoit la réponse de l'étudiant. Puis à la ligne 7, le bouton appelle la fonction addReponse().
Décorateur Angular 7

Dans la définition du component “Étudiant” la tâche est simple. à la Ligne 19, on cré un eventEmitter décoré par l’attribut @Output. Puis la propriété “ReponseSaisie”.

Finalement à partir de la ligne 21, la méthode qui sera exécuté par le bouton ‘Envoyer Réponse’ : Notez bien qu’on utilise la fonction .emit() pour pousser la réponse de l'étudiant vers l’enseignant.
Décorateur Angular 7

@ContentChildren and @ContentChild

Parfois, le component Parent a besoin d'accéder au composant descendant pour chercher des éléments et faire les actions nécessaires. cette action est possible avec les deux décorateurs qu’on va étudier, tout de suite.

Ces deux décorateurs peuvent chercher des éléments à l'intérieur du component lui même et des components liés.

@ContnentChildren: cherche tous les éléments qui vérifient une condition particulière. Par contre , @ContnentChild cherche le premier élément qui vérifie cette condition.

Une information, assez importante, @ContnentChildren retourne un objet de type “QueryList”.
Comme son nom l’indique elle permet de créer une liste des éléments trouvés et cette liste implémente l’interface IQueryable. c.a.d, qu’elle implémente les fonctions: First(), Last(), Foreach, Find()) ….


Exemple @ContentChild

Il permet de trouver le premier élément qui vérifie une condition. Notre exemple s’agit de changer la ville de travail d’un employé.

On commence par générer 3 components: ville, adresse et employé. La nouveauté cette fois qu’on va organiser ces component sous un dossier nommé “VillesExemple”. Voila le code pour générer le premier component à vous de générer les autres. Décorateur Angular 7

Décorateur Angular 7

L’organisation des components sera de la manière suivante:
Décorateur Angular 7

Le but est de créer une tout petite application qui permet d’afficher le profil d’un employé et qui permet de changer la ville de travail de cet employé (Bien sur en utilisant contentChild). D’une manière fonctionnelle: on utilise le bouton “Changer lieu de travail” pour basculer entre les villes
Décorateur Angular 7

- Etape 1 (Component Ville):
Dans ce component, on a besoin de définir deux propriétés (VilleId et VilleName) et on a pas besoin de créer une template. c’est un component sans template.
N'oubliez pas les importations des classes Input et OutPout.
Décorateur Angular 7

-Etape 2 (Component Adresse):
Décorateur Angular 7

Dans la définition du component on a besoin d’ajouter ou modifier des importations (Voir ligne 1 et 2). Puis à la ligne 13 on a créer une propriété nommée ‘ville’ de Type ‘VilleComponent’.

Cette propriété ville utilise le décorateur @contentChild(VilleComponent) pour chercher dans le HTML deu component actuel (AdresseComponent) s’il y a des sous éléments de type (VilleComponent).

Ce décorateur @contentChild(VilleComponent) rend le premier élément trouvé.

Maintenant dans la template du component adresse, on affiche le Titre et l’Id et le nom de la propriété ville retournée par le décorateur @ContentChild.
Décorateur Angular 7

-Etape 3: (Component Employé)
Dans la définition du component on ajoute quelques propriétés statiques (NomEmploye, DateEntree et Technologies).

Aussi, il y la propriété “HomeTown” qui permet de dire que cette ville est la ville de travail de cet employé. Puis, il y a la fonction OnchangeCity () qui sera appelée par le bouton et qui permet de faire une permutation entre les villes de travail.
Décorateur Angular 7

Maintenant sur la template du component employé: On commence par afficher les propriétés statiques. Puis le component <adresse> qui englobe deux composantes <ville>.

NB: les components villes (Voir ligne 17 & 18) déclarent les Inputs VilleId et VilleName. La visibilité de chacun dépend de l'état de la propriété booléenne “HomeTown”.

Finalement, il y a le bouton qui appelle la fonction ‘OnchangeCity()’ pour basculer d’une ville à une autre. Décorateur Angular 7


Exemple @ContentChildren:

On a dit que le décorateur @ContentChildren permet de chercher les enfants qui répondent à une condition. Et non pas que le premier child.
L’exemple suivant va nous montrer comment faire cette sélection de plusieurs éléments.

“@ContentChildren” possède une propriété booléenne qui s’appelle descendants. si descendants == true donc “@ContentChildren” va chercher dans tout l'arborescence (Tous les niveaux) même les fils des fils pour trouver les éléments qui correspondent.

Par contre si descendants == false, dans ce cas “@ContentChildren” va retourner seulement les éléments du premier niveau. Regardons ça avec un exemple.

On va créer un nouveau component qui s’appelle “selection”. Ce component permet de nous retourner une sélection des villes. Cet exemple, va faire au component ville qu’on a créé tout à l’heure. A travers ‘L’invite de commande’ créer un nouveau component dans le même dossier ‘VilleExemple’
Décorateur Angular 7

Etape 1:
Dans la definition, on commence par Importer QueryList (Voir Ligne 1: c’est une collection où on va récupérer les éléments recherchés).
Par la suite, on va créer deux propriétés de Type QueryList <VilleComponent> la première topVilles qui cherche dans niveau 1. Et la deuxième ‘allVilles’ qui a la propriété ‘descendant == true’ cherche dans tous les niveaux. Décorateur Angular 7

Etape 2:
Dans la template, on applique une boucle ngfor sur les deux QueryLists qu’on a définis dans la définition de la partie précédente.
Décorateur Angular 7

Etape 3:
Maintenant on a un component ‘selection’ qui cherche dans ces descendants les éléments de type villeComponent. Si les éléments trouvés sont de niveau 1 donc il les affiche dans la première liste et une deuxième liste qui affichent tous les éléments peu-importe leurs niveau.

On a besoin d’un dernier component (Seulement ça template pour charger un ensemble des ville). Pour ceci on créé le component personne.
Décorateur Angular 7

Résultat:
Deux listes: la première pour les villes du premier niveau et la deuxième pour tous les niveaux. Décorateur Angular 7

Difference entre ( @ContentChildren and @ContentChild) Vs (@ViewChildren and @ViewChild)

Child = un seul élément à rechercher. Children = plusieurs éléments à rechercher.
généralement, les décorateurs @Content... and @View… sont utilisés de la même manière: chercher dans les descendants pour les éléments satisfaisants une condition.

avant de répondre à cette question. On a besoin de comprendre la notion de “ShadowDOM” et “LightDOM”. Les terminologies sont significatifs Shadow= Ombre et Light=Lumière et DOM est tout simplement notre code HTML. Donc LightDOM est la partie HTML visible dans votre code. Par contre ShadowDOM est la partie HTML non visible directement mais qui sera évaluée et rendue à l’internaute.

Imaginons qu’on a un component nommé ‘ComponentA’, qui contients des blocs HTML dans sa template. Un user, utilise ce component de la manière suivante :
< componentA >
<elem1>
<elem2> </elem2>
</elem1>
<elem3>
</elem3>
</CompnentA>

Dans ce cas, on appelle “ShadowDOM” les blocs HTML, dans la template du . Et “LightDOM” les autres éléments visibles comme <elem1>, <elem2> et <eleme3>.

Donc @ViewChildren et @ViewChild cherchent dans le Shadow D.O.M donc cherchent dans les blocs html du ComponentA. Par contre, @ContentChildren et @ContentChild cherchent dans la partie Light D.O.M

Les sources

Vous pouvez télécharger le contenu du code source à partir du lien suivant
Télécharger le dossier SRC

Le fichier telechargé est le dossier SRC (compressé) de notreapplication. Il suffit de remplacer le dossier "src" de votre projet par celui téléchargé.

Personnellement je vous conseille de suivre le tutoriel de l'article et d'ecrire le code mot à mot pour plus d'apprentissage.

Conclusion

Cet article couvre deux sujets importants: Les décorateurs et la communication entre components.

Dans le prochain article nous parlerons d'un sujet très important dans tous les sites web: Les Formulaires .

Finalement, Si vous avez des questions ou des remarques merci de laisser un commentaire.


Commentaires (3)

angular | 14/5/2019

OOO

angular | 14/5/2019

OOO

Mike Bauher | 18/9/2019

merci pour ce cours bien expliqué.

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)