Discussion :

[mazertys17]

Bonjour,

Je ne comprends pas pourquoi, ngClass ne fonctionne pas correctement chez moi.
Voici comment je l'utilise (avec bootstrap):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  <div
    [ngClass]="{
                'btn btn-succes' : false,
                'btn btn-danger' : (test == 1)
          }"
  >test</div>

Si test est égal à 1, alors la class est appliquée, sinon non.

Avez vous déjà eu ce problème ?

Merci

[NoSmoking]

Bonjour,
j'ai du mal à voir ce que tu cherches à faire !
D'où sortent tes variables ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div [ngClass]="{
    'btn btn-danger' : data.test === '1'
}">{{data.test}}</div>

ou quelque chose de proche.

[mazertys17]

Salut, NoSmoking.

En fait c'est juste une variable test crée dans le component avec angular.
Par défaut elle est égale à 1 si je clique sur un bouton X ou Y , elle incrémente.

Le but c'est de changer la couleur du bouton tout simplment en fonction de cette variable.

Bon pour être plus explicite je te mets le code plus complet avec la valeur "classement" à la place :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="navbar-nav classementDiv">
  <div [ngClass]="{'btn btn' : true, 'btn btn-primary' : classement == 'date' }" (click)="setClassement('date')" >date</div>
  <div [ngClass]="{'btn btn' : true, 'btn btn-primary' : classement == 'likes' }" (click)="setClassement('likes')" > likes</div>
</div>

En gros tu va pouvoir cliquer sur date ou sur likes pour classer des données qui seront donc affichées en fonction de ces boutons.
Et dans mon cas ça marche dés que le classement correspond, le bouton est bien de type primary, mais sinon il n'y a même plus de bouton comme si le ngClass n'opérait plus.