Dev Faq
0
votes

Changer de couleur de fond des boutons onclick

J'ai deux boutons appelés oui et non dont la couleur (i, e arrière-arrière-couleur) est une lumière comme ceci:

Entrez la description de l'image ici

Lorsque l'utilisateur clique sur oui

  • oui couleur de fond de bouton doit changer de vert (i, e réussite) et non doit être en couleur claire comme ceci:

    Entrez la description de l'image ici

    Lorsque l'utilisateur clique sur non

    • NO COULEUR DE CONTEXTE DE BOUTON DEVRAIT CHANGER AU ROUGE (I, E DANGER) ET OUI doit être en couleur claire comme ceci:

      Entrez la description de l'image ici

      Demo

      tandis que je vue question . Ici, ils ne changent que d'un bouton couleur sur clic . Mais pour mes besoins, la couleur doit changer sur cliquez sur .

      code

      HTML xxx

      CSS xxx

      TS xxx

0 commentaires

4 Réponses :

0
votes

Essayez comme ceci:

TS: xxx

html: xxx

0 commentaires
2
votes

3 valeurs signifie que vous ne pouvez pas utiliser de booléen. Mais vous pouvez utiliser un numéro: 

<ion-button class="btn-1" expand="full" [color]="buttonValue > 0 ? 'success' : 'light'" (click)="buttonValue = 1">Yes</ion-button>
<ion-button class="btn-2" expand="full" [color]="buttonValue < 0 ? 'danger' : 'light'" (click)="buttonValue = -1">No</ion-button>

1 commentaires

@Sgr pas de problème, si vous sentez que votre question a été répondue, envisagez d'accepter l'une des réponses!

0
votes

Vous pouvez ajouter une classe en cliquant avec ngclass comme ceci xxx

et dans votre TS xxx

0 commentaires
1
votes

Ici, vous pouvez essayer ce code ou suivre ce lien Stackblitz :

Modifiez votre modèle home.par.html xxx

et mettez à jour le < fort> home.page.ts xxx

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail