J'essaie d'appliquer une classe CSS basée sur une condition. Ceci est mon code, mais il ne semble pas appliquer la classe correctement.
Fondamentalement si sélectionnéemployée.ishremailAddress est vrai alors je veux remplacer section avec . section-postal
5 Réponses :
Vous devez supprimer le point du nom de la classe dans le [ngclass] code> valeur. section { /* denotes the `<section>` tag: type selector syntax */
height: 500px;
}
.section-postal { /* denotes the `section-postal` class: class selector syntax */
height: 650px;
}
En HTML, vous devez utiliser le nom de la classe sans le point.
[ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">
Vous pouvez également utiliser une liaison, si vous souhaitez simplement remplacer une seule classe. Voici le Documentation , consultez la section Propriété de classe
Ici, nous allons,
.section-postal { // css file
color:red;
}
i = true; // in ts file
<section [ngClass]="{'section' : i, 'section-postal' : !i }"> //html file
Vous pouvez utiliser l'opérateur ternaire dans NgCllass pour sélectionner la classe en fonction de la condition
[ngClass]="selectedEmployee.isHrEmailAddress ? 'section-postal' : 'section'"