Dans le cours : Angular : Dynamisation des applications

Définir les directives - Tutoriel Angular

Dans le cours : Angular : Dynamisation des applications

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Définir les directives

“

On va maintenant voir une notion de directive, pas les directives qu'on aurait pu voir comme pour mon animate.directive. Ce qu'on va voir, c'est plus les directives de type ngIf dans le HTML. Avant ça, on va faire quelques petites modifications pour ceux qui les auraient faites. On va retirer le view child qui nous cause une erreur, malgré son bon fonctionnement. Sauvegardons tous nos fichiers avec Ctrl+K, puis S. Maintenant, intéressons-nous à ces directives, comme ngIf, ngFor. Elles ont chacune une utilité et vous pouvez voir, dans le cas de ngIf, cette étoile. Cette étoile définit une directive d’effectuer une action. Le ngIf, par exemple, qui va nous permettre d'afficher ou non un élément, si on répond une valeur true ou false. J'ai aussi évoqué la balise ngFor. On l'utilise dans notre projet. Vous pourrez la retrouver dans appcomponenthtml. Comme vous pouvez vous en douter, elle agit sous la forme d'une boucle et dans notre cas, elle nous permet d'afficher une carte pour chaque contact qu'on récupère de notre base de données. Ces directives vont nous permettre de modifier directement notre DOM. Par exemple, afficher ou cacher, dans le cas du ngIf ou bien même d'afficher plusieurs fois des éléments ou le même élément avec des informations différentes ou bien même, avec les mêmes informations et ces directives dans leurs paramètres peuvent recevoir des pipes. Par exemple, comme on pourrait le voir avec le pipe async. Je vous conseille de voir tout ce qui concerne le pipe async, tout simplement le pipe, comme on pourrait le voir dans un service, ainsi que le async, toujours sur le même sujet, dans le cadre des services, en lisant la documentation ou bien même en suivant une formation. Mais revenons à nos directives. Elles ont bien des utilités. Il y en a énormément de disponible de base dans Angular. Et vous pouvez voir qu'avec très peu de code, je peux effectuer du traitement qui serait plus coûteux en nombre de caractères si je devais le faire via le typescript. Ce ne sont vraiment pas des directives à prendre à la légère, puisqu'elle vont vous permettre un gain de temps énorme et éviter d'effectuer des traitements liés au HTML dans votre typescript et de bien départager les traitements dans votre code.

Table des matières