Quel est l'équivalent de ng-show et ng-hide dans Angular 2+?

Vous déplacez vos pages d'AngularJS vers Angular… mais vous avez un tas d'éléments embêtants signalés par ng-show et / ou ng-hide. Voici comment migrer vers (essentiellement) la même fonctionnalité dans Angular.

Vous déplacez vos pages d'AngularJS vers Angular… mais vous avez un tas d'éléments embêtants signalés par ng-show et / ou ng-hide. Voici comment migrer vers (principalement) la même fonctionnalité dans Angular. En fait, voici deux solutions.

Dans Angular, vous contrôliez l'affichage du contenu de votre page avec ng-hide avec un balisage comme celui-ci:

 < span   ng-show  =  " bolShow "  > … contenu à afficher et masquer…  </  span > 
 

Si vous passez à Angular, vous avez découvert que ng-show et ng-hide n'existent plus. La réponse courte à ce problème (mais pas la plus fiable) est de passer à l'utilisation de l'attribut masqué HTML5. Par exemple, ce code lie le champ bolShow à l'attribut masqué, puis utilise l'attribut pour contrôler si le contenu d'un élément span est affiché:

 < span   [hidden]  =  ”! BolShow” > … contenu à afficher et masquer…  </  span > 
 

L'utilisation de hidden fonctionne également si vous utilisez ng-hide. Si vous aviez:

 < span   ng-hide  =  " bolHide "  > … contenu à afficher et masquer …  </  span > 
 

alors vous pouvez le remplacer par:

 < span   [hidden]  =  ”! BolHide” > … contenu à afficher et masquer… [19659010] </  span > 
 

Il y a quelques notes d'utilisation ici:

• Les crochets autour de l'attribut caché garantissent que l'attribut est défini sur la valeur dans bolShow (et n'est pas défini sur la chaîne «! BolShow»).
• Le La variable que vous utilisez (bolShow, dans mon exemple) doit être définie sur des valeurs dont vous êtes sûr qu'elles sont véridiques et fausses.

Pour ce dernier problème, les valeurs true et false sont vos meilleurs choix, bien sûr. Si vous définissez hidden sur les chaînes «true» ou «false», par exemple, parce que ces valeurs sont des chaînes, elles sont toujours véridiques et le contenu de la balise span sera toujours visible.

Understanding the Hidden Attribute

What cette solution entraîne l'ajout de l'attribut hidden à l'élément span lorsque bolShow est false et est ignoré lorsque bolShow est défini sur false. Fait intéressant, sous le capot, ng-hide et ng-show appliquaient des règles de style CSS pour contrôler si le contenu était affiché. En fait, avec cette solution, vous gérez vous-même le HTML et éliminez éventuellement le CSS…

Le problème avec l’utilisation de l’attribut masqué, cependant, est que l’attribut a une priorité inférieure aux règles CSS. Par conséquent, s'il existe une règle de style CSS attribuée à votre élément qui fait apparaître l'élément, alors peu importe ce que vous définissez l'attribut masqué. Une règle qui, par exemple, définit la propriété d'affichage CSS sur tout sauf aucune, entraînera l'affichage de votre contenu; si l'affichage est défini sur aucun, alors peu importe ce que vous définissez comme masqué.

Si vous voulez que l'attribut masqué fonctionne à chaque fois, alors, dans la feuille de style utilisée par la page, vous pouvez ajouter la règle importante CSS à l'attribut caché, comme ceci:

 .hidden   {
 display :  none ! important ; 
} 

Avec le règle importante ajoutée à l'attribut hidden, l'attribut hidden remplace toutes les règles CSS appliquées à l'élément – vous obtiendrez toujours le résultat que vous attendez (pour mémoire, c'est ainsi que les règles de style utilisées par ng-show et ng-hide

Si vous allez utiliser des règles de style CSS, vous voudrez peut-être envisager d'utiliser la propriété de visibilité CSS au lieu de hidden. La visibilité vous permet de contrôler l'espace occupé par un élément masqué. Lorsque l'élément est masqué, la visibilité: aucun n'abandonne l'espace que l'élément occuperait normalement. D'un autre côté, avec visibilité: caché, l'élément continue d'occuper son espace, mais sans afficher son contenu.

Une solution alternative

Mais cela commence à devenir laid. Utiliser important est considéré comme une mauvaise pratique en CSS précisément parce qu'il bouleverse le système de priorité de style (CSS est appelé «en cascade» pour une raison). De plus, vous êtes désormais impliqué à la fois avec l'attribut masqué sur vos éléments et une règle spéciale dans votre feuille de style.

Pour ces deux raisons, la directive * ngIf pourrait être un meilleur choix. Contrairement à l'utilisation de l'attribut hidden, * ngIf fonctionne indépendamment de CSS. Dans cet exemple, si bolShow est vrai, le contenu de la balise span sera rendu, quelles que soient les règles CSS impliquées:

 < span   * ngIf  =  ”bolShow” [19659007]> … contenu à afficher et masquer…  </  span > 
 

Sachez cependant que * ngIf a ses propres problèmes: l'utilisation de * ngIf entraîne la suppression effective de l'élément de la page. Par conséquent, JavaScript et jQuery ne pourront pas trouver l'élément, et les balises d'ancrage qui font référence à des cibles dans le contenu ne fonctionneront pas lorsque * ngIf est faux.

Que puis-je dire? Il n'y a pas de solution parfaite. Mais vous devez choisir si vous allez avoir le bras coupé ou arraché.