Cacher angulaire avec le bouton

Question

Donc je travaille avec angulaire et j'essaye de faire un bouton qui clique disparaît quand on clique dessus. J'ai essayé d'utiliser [hidden], (click) = "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 mon composant:

export class AppComponent { 
inboundClick = false; 
} 

en substance, j'ai 2 boutons sur une page et quand on clique sur le bouton que je veux cacher les 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.

Answer 1

Votre HTML

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

Votre tapuscrit

export class AppComponent { 
    private isButtonVisible = true; 
} 

Cela devrait faire le travail. *ngIf masque automatiquement l'élément, si la condition évalue false, la définition de la variable à false est suffisante.

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

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

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

Surtout la partie « Common Use » devrait être intéressant pour vous.

Edit: La lecture de votre commentaire ci-dessous, il semble que vous ne l'avez pas remarqué ce que [hidden] et (click) font réellement. [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 inline, comme démontré dans le exemple de code).

Edit2: Oui, vous vouliez dire Angular2/4;) Donc, cela devrait faire l'affaire.

Answer 2

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; 
} 

---

PLUNKER DEMO