web-dev-qa-db-fra.com

Angular Masquer avec le bouton

Je travaille donc avec angular et j'essaie de créer un bouton qui, lorsque vous cliquez dessus, disparaît. J'ai essayé d'utiliser [caché], (cliquez) = "showHide =! ShowHide", et un tas d'autres méthodes. rien ne fonctionne jusqu'à présent.

mon html (actuellement):

<div class="rows">
 <div class="a-bunch-of-styles-for-my-button">
  <a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
  </a>
 </div>
</div>

et ma composante:

export class AppComponent {
inboundClick = false;
}

en gros, j'ai 2 boutons sur une page et quand un bouton est cliqué, je veux cacher les deux boutons et afficher un ensemble de nouveaux boutons.

Je suis très nouveau à Angular et je suis très confus pourquoi cela ne fonctionnera pas.

htmlangulartypescriptshow-hide
7
RaptorJesus

Votre HTML

<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>

Votre TypeScript

export class AppComponent {
   private isButtonVisible = true;
}

Cela devrait faire l'affaire. *ngIf masque automatiquement l'élément, si la condition évalue false, il suffit donc de définir la variable sur false.

Le problème que je vois ici est que vous ne contrôlez la visibilité à aucun moment. Utiliser [ngClass] pour ajouter une classe spécifique, si une condition est remplie, ou *ngIf est utile chaque fois que vous essayez de modifier des éléments sur l'interaction avec l'utilisateur.

Pour plus d'informations sur [ngClass], vous pouvez lire son utilisation ici: https://angular.io/api/common/NgClass

Vous pouvez lire sur *ngIf ici: https://angular.io/api/common/NgIf

En particulier, la partie "Utilisation commune" devrait vous intéresser.

Edit: En lisant votre commentaire ci-dessous, il semble que vous n'ayez pas remarqué ce que [hidden] et (click) en fait. [hidden] contrôle la visibilité de l'élément, généralement en fonction d'une certaine condition. (click) est cependant un moyen rapide de lier un Click-Event à votre élément.

L'utilisation de ces deux outils permet de masquer un élément, en changeant une variable, si un utilisateur clique sur votre élément (la nouvelle valeur de la variable peut être affectée par une fonction appelée par (click) ou en ligne, comme illustré dans l'exemple de code).

Edit2: Oui, vous vouliez dire Angular2/4;) Donc, cela devrait faire le travail.

10
GxTruth

Voici comment vous pouvez y parvenir:

Dans votre component.html:

<a type="button" class="more-styles" 
   [hidden]="!inboundClick" 
   (click)="inboundClick = !inboundClick" 
   [routerLink]="['/inbound']" href="">
</a>

<a type="button" class="more-styles" 
   [hidden]="!outboundClick " 
   (click)="outboundClick = !outboundClick " 
   [routerLink]="['/outbound']" href="">
</a>

... et dans votre AppComponent:

export class AppComponent {
    inboundClick = true;
    outboundClick = true;
}

DÉMONSTRATION PLUNKER

5
Faisal