2
votes

Afficher / masquer les éléments de la liste dans Angular dans le HTML

J'ai une liste de 4 éléments, les 2 premiers visibles et les 2 derniers masqués.

Et un bouton "Afficher plus / moins" qui fait basculer la visibilité des 2 derniers éléments.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li class="hidden">Item 3</li>
 <li class="hidden">Item 4</li>
</ul>

<a href="#">Show More</a>

Est-il possible de créer cette fonctionnalité dans le HTML en utilisant Angular?

Ai-je besoin d'un composant? Dois-je utiliser un composant?

angular angular6 angular7

4 commentaires

Dans Angular, le HTML fait partie d'un composant. Vous avez donc besoin d'au moins 1 composant pour avoir une application Angular.

Bien sûr, j'ai déjà de nombreux composants. Ce que je demandais, c'est si j'ai besoin d'une variable dans le composant pour que cela fonctionne.

C'est une question angulaire très basique. Je vous suggère de passer en revue les principes de base angulaires, en particulier les Composants et modèles et vous devriez être en mesure de résoudre ce problème facilement.

oui, vous devez le lier à une valeur. Je dirais cependant qu'un comportement comme celui-ci peut être plus adapté à une directive; de cette façon, la portée de chacun serait plus isolée.

3 Réponses :

0
votes

Vous pouvez utiliser la directive NgIf pour afficher et masquer les éléments HTML en fonction d'une condition.

NgIf Documentation

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li ngIf*="!hidden">Item 3</li>
 <li ngIf*="!hidden">Item 4</li>
</ul>

<a href="#">Show More</a>

"hidden" serait une variable (située dans le fichier dactylographié) qui peut être basculée comme vrai / faux. Le li sera affiché si hidden est faux et caché si hidden est vrai.

0 commentaires

1
votes

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hidden" *ngIf ="hidden">Item 3</li>
<li class="hidden" *ngIf ="hidden">Item 4</li>
</ul>

<a href="#" (click)="hidden = !hidden"> {{hidden ? 'show less' : 'show more'}}</a>

0 commentaires

1
votes

Solutions: (avant toutes les solutions, vous devez ajouter la variable "visible" à votre fichier ts)

En supprimant des éléments du DOM:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

Par classe dynamique: html:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li [hidden]="!visible">Item 3</li>
     <li [hidden]="!visible">Item 4</li>
    </ul>

(s)css:

.some-hidden-class{ display: none; }

Via directive masquée:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li [class.some-hidden-class]="!visible">Item 3</li>
 <li [class.some-hidden-class]="!visible">Item 4</li>
</ul>

À mon avis, la solution 1. est la meilleure, car si les elemenets sont cachés alors dans DOM vous ne voyez aucun HTML à l'intérieur, donc le HTML rendu dans la 1ème solution ressemblera à:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li *ngIf="visible">Item 3</li>
 <li *ngIf="visible">Item 4</li>
</ul>

Le plus gros inconvénient de cette solution est lorsqu'une opération doit être effectuée lorsque cet élément est masqué (par exemple, vous avez un composant à l'intérieur et vous voulez charger les informations requises avant d'afficher les éléments cachés, car tous les utilisateurs verront cela staf en fonction proche)

Les solutions n ° 2 et 3 sont ... l'oposite de * ngIf (le DOM contient du HTML, donc les fichiers ts permettent de faire quelque chose avec le contenu, et aussi de faire des opérations internes) p >

0 commentaires