web-dev-qa-db-fra.com

Angular - Comment appliquer des conditions [ngStyle]

J'ai une div que je veux coiffer en fonction d'une condition.

Si styleOne est vrai, je souhaite une couleur de fond rouge. Si StyleTwo est vrai, je veux que la couleur d'arrière-plan soit bleue. J'en ai la moitié qui travaille avec le code ci-dessous.

<div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">

Est-il possible d'ajouter une condition pour dire:

  • si styleOne est vrai, fais ceci
  • si styleTwo est vrai, fais-le?

Éditer

Je pense l'avoir résolu. Ça marche. Pas sûr que ce soit le meilleur moyen:

<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">
angularng-style
14
MegaTron

Pour un attribut de style unique, vous pouvez utiliser la syntaxe suivante:

<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">

J'ai supposé que la couleur de fond ne devrait pas être définie si ni style1 ni style2 est true.

Puisque le titre de la question mentionne ngStyle, voici la syntaxe équivalente avec cette directive:

<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">
37
ConnorsFan

Vous pouvez utiliser un inline si à l'intérieur de votre ngStyle:

[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"

À mon avis, une méthode pratique consiste à stocker la couleur de fond dans une variable, puis à définir la couleur de fond comme valeur de la variable:

[style.background-color]="myColorVaraible"
6
Gili Yaniv
[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"
3
Chaudhary