Afficher ou masquer un élément selon une condition

Afficher/masquer en changeant la classe CSS

Votre framework CSS dispose sûrement d’une classe CSS permettant de masquer un élément. Dans Bootstrap, il y a plusieurs class comme ’d-none’ (A CONFIRMER). On peut utiliser le binding de propriété pour ajouter cette classe si une condition est remplie.

Exemple : Masquer un bouton “Supprimer” si l’utilisateur n’est pas admin.

<button [class.d-none]="!user.isAdmin">Supprimer</button>

Cela suppose bien sûr l’existence d’une propriété user.isAdmin, de type booléen, dans la classe.

Afficher/masquer avec *ngIf

La directive structurelle *ngIf permet carrément d’ajouter ou supprimer un fragment de markup dans la page, en fonction d’une condition. C’est donc une solution plus radicale que la méthode “classe CSS” qui se contente de masquer visuellement le markup.

Exemple : Retirer un bouton “Supprimer” du code source de le page si l’utilisateur n’est pas admin.

<button *ngIf="!user.isAdmin">Supprimer</button>

Cela suppose bien sûr l’existence d’une propriété user.isAdmin, de type booléen, dans la classe.

Solutions moins intéressantes : changer la propriété CSS display ou la propriété DOM hidden

On peut également masquer un élément en changeant sa propriété CSS display (en CSS, display: none cache et display: block affiche), mais c’est moins robuste que de passer par une classe CSS :

<p [style.display]="condition ? 'block' : 'none'">...</p>

Enfin, les balises HTML possèdent une propriété DOM hidden, qui masque la balise si elle vaut true, mais cette solution n’est pas très robuste, car parfois les styles CSS sont prioritaires sur cette propriété :

<p [hidden]="CONDITION">...</p>

Et si la portion à afficher/masquer n’est pas encadré par une balise ?

Comme on l’a vu dans les exemples précédents, la partie de page à afficher/masquer doit être encadrée par une balise HTML, car c’est cette balise qui accueille la classe CSS ou le *ngIf.

L’élément à afficher/masquer peut être une balise ou un composant Angular.

En cas d’absence de balise, vous pouvez utiliser la pseudo-balise <ng-container>...</ng-container>. C’est une balise neutre qui ne produit aucun HTML une fois compilée. Son utilité est uniquement d’encadrer un bout d’interface pour le masquer ou pour le répéter.