changer glyphe-icône sur cliquez sur le bouton en angle 2

Question

Je veux que lorsque je clique sur ce bouton, le 'glyphicon-plus' change en 'glyphicon-minus' et quand je clique de nouveau, il sera à nouveau 'glyphicon-plus '. Je veux Il devrait être Toggelable. Je ne le veux pas en css ou en jquery. app.component.html:

<button data-toggle="collapse" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-plus"></span> 
</button> 

Answer 1

Dans votre modèle, utilisez un sign de liaison et un événement click reliure comme suit:

<button data-toggle="collapse" 
     (click)="toggleSign()" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-{{sign}}"></span> 
</button> 

Dans votre classe de composant, modifiez la propriété sign sur chaque clic. Toujours penser aux choses de cette façon dans Angular - mon point de vue comme un reflet de l'état de mes composants. Donc, si je veux changer les choses visuellement, en utilisant le système de liaison pour lier les parties variables de ma vue aux propriétés de mes composants et juste changer les propriétés du composant pour refléter la vue que je veux.