Afficher et masquer en Angular

Nous présenterons des exemples d’affichage et de masquage de composants ou d’éléments dans Angular.

Afficher et masquer en Angular

Lors du développement d’une application commerciale, nous devons masquer certaines données en fonction des rôles ou des conditions des utilisateurs. Nous devons afficher les mêmes données selon les conditions de cette application.

Dans ce didacticiel, je vais vous montrer un moyen simple d’utiliser lequel nous pouvons afficher et masquer des données en fonction de conditions.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Supposons que nous ayons un modèle ou un bloc de code que nous souhaitons afficher uniquement si la condition est vraie et le masquer lorsqu’il est faux. Nous pouvons l’afficher et le masquer en utilisant cet exemple.

Tout d’abord, nous allons créer un contenu de démonstration dans app.component.html qui comprendra un titre, un paragraphe et un champ de saisie, et nous l’envelopperons dans un div.

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Maintenant, dans app.component.ts, nous créons une nouvelle variable element et la définissons sur false.

# Angular
element = false;

Nous utiliserons *ngIf pour afficher et masquer notre div en fonction de la condition.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Comme vous pouvez le voir dans l’exemple ci-dessus, nous avons défini une condition si l'élément est true, le div sera affiché, et si la condition est false, il ne s’affichera pas.

Ainsi, le div sera masqué car nous avons défini l’élément false. Maintenant, changeons la valeur de element en true et vérifions comment cela fonctionne.

Production:

Vous pouvez maintenant voir que lorsque nous avons changé la valeur de element, la condition que nous avons définie sur div a changé, et il a commencé à afficher le div avec tous les éléments à l’intérieur.

Imaginez si nous voulons afficher et masquer des données chaque fois que certains boutons sont cliqués. Nous pouvons créer cet exemple simple en utilisant le même *ngIf.

Maintenant, créons deux boutons ayant deux fonctions showData() et hideData(). Nous devons créer ces deux boutons en dehors de la div, afin qu’ils ne soient pas masqués lorsque la condition est modifiée en false.

Ainsi, notre code dans app.component.html ressemblera à ci-dessous.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

Maintenant, créons ces deux fonctions dans app.component.ts. showData() va changer la valeur de element en true et hideData() va changer la valeur de element en false.

Ainsi, le code ressemblera à ci-dessous.

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

Nous allons maintenant ajouter du code CSS pour rendre nos boutons plus beaux.

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

Vérifions comment cela fonctionne.

Production:

Comme vous pouvez le voir dans l’exemple ci-dessus, nous pouvons facilement masquer et afficher le contenu en utilisant les méthodes *ngIf et le bouton (clic).

Si nous voulons masquer le bouton Display Data lorsque le contenu s’affiche et le bouton Hide Data lorsque les données sont masquées, nous pouvons également utiliser le même concept sur les boutons.

Créons donc une condition *ngIf si l’élément element est true, le bouton hide data sera affiché seulement, et quand l’élément element est false, le bouton display data sera affiché.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

Nous n’avons pas besoin d’écrire de ligne de code dans le fichier app.component.ts car les fonctions que nous avons créées et la fonction *ngIf nous aideront à accomplir la même chose sur les boutons. Alors, vérifions le résultat comment cela fonctionne maintenant.

Production:

Ainsi, dans ce didacticiel, nous avons appris à masquer et à afficher le contenu en fonction des conditions à l’aide de *ngIf, et nous avons également appris à utiliser la méthode des boutons (click) pour nous aider à masquer et à afficher les données sur le bouton.