Angular - 2.22- Utilisation de ngIf pour sortir des données de manière conditionnelle

Dans l'exemple d'application que nous avons construit jusqu'à présent, nous n'avons pas utilisé de directives à part les composants qui sont des directives. Mais nous n'avons utilisé aucune autre directive intégrée. Maintenant, disons qu'une des choses que nous voulons faire, c'est que nous voulons seulement montrer que ce server a été créé ici. Il n'est pas nécessaire d'avoir ce texte. Aucun server n'a été créé. Donc ce qui serait bien, c'est si nous pouvions afficher ce message de manière conditionnelle. Et pour cela, nous avons besoin d'aide. Nous pouvons utiliser une directive livrée avec Angular, la directive ngIf.

Maintenant, ça fonctionne comme une instruction if et pour être précis, ça fonctionne comme ça, dans notre composant de service ici, où nous sortons le statut de création du serveur. Je vais commenter ça pour que nous puissions toujours faire référence à ce code, mais maintenant je vais ajouter un nouveau paragraphe où je dis simplement que le serveur a été créé. Le serverName est lié donc bind au serverName.

Maintenant, avec ça en place, ça va toujours fonctionner, mais maintenant on voit à chaque fois que l'on appuie sur une touche comment nous changeons le serverName, ce qui n'est pas vraiment ce que je veux. À la place, je veux qu'il soit affiché dès que l'on clique sur ce bouton ici. Donc ce que je peux faire, c'est ajouter une directive ici. Et comme je l'ai dit, les directives sont généralement ajoutées en utilisant un sélecteur d'attribut.

Et à peu près toutes les directives intégrées utilisent ce sélecteur ngIf. Et ensuite, ngIf est ajouté en ajoutant une étoile. Donc c'est important, étoile ngIf, l'étoile est nécessaire car ngIf est une directive structurelle, ce qui signifie qu'elle modifie la structure de notre DOM. Soit elle ajoute cet élément, soit elle ne l'ajoute pas. C'est donc juste une information supplémentaire pour Angular. La directive elle-même est juste ngIf, mais l'étoile est nécessaire. Sans elle, elle ne fonctionnera pas correctement.

Donc ngIf, et ensuite nous pouvons mettre en place notre condition ici entre guillemets. Pour ngIf, cela doit être une expression quelconque, retournant vrai ou faux, décidant si cela doit être ajouté ou non. Donc ici, il serait logique d'ajouter une nouvelle propriété que nous nommons serverCreated et que nous fixons à false. Et nous la mettons à true une fois que le bouton est cliqué. Donc ici on crée un serveur, qui est déclenché lorsque le bouton est cliqué. Ici nous mettons serverCreated égal à true.

Maintenant, avec cela, nous pouvons retourner à notre modèle et simplement lier ngIf à serverCreated. Et encore une fois, cela peut aussi appeler une méthode qui renvoie vrai ou faux ou directement effectuer la vérification entre guillemets, tout ce qui renvoie vrai ou faux.

Maintenant, avec ceci, si nous sauvegardons , ce que vous voyez, c'est qu'il n'y a pas de texte. Mais si je nomme testserver 2 et que je clique sur le bouton, maintenant le texte est ajouté ici. Et la chose intéressante est que si je recharge l'application et que nous inspectons notre DOM ici, vous voyez ici c'est notre appServerComponent. Au-dessus, il y a le bouton. Mais si je clique sur ce bouton, un nouvel élément est entré ici, le paragraphe. Et ici vous voyez une sorte de hook qu'Angular a créé pour savoir où il doit être entré. Mais la chose importante est qu'il est vraiment ajouté ou retiré du DOM. Il n'est pas là tout le temps. Il n'est pas caché, il n'est juste pas là, ce qui est super important à comprendre. Voici donc ngIf. Encore une fois, le début indique qu'il s'agit d'une directive structurelle qui change vraiment le DOM comme vous venez de le voir.