Pour donner de la vie à vos applications et améliorer l'expérience de vos utilisateurs, il vous sera souvent utile d'ajouter des styles dynamiques à vos components.
La fonctionnalité que je vous propose d'ajouter maintenant est que plus un FaceSnap a de "snaps", plus le nombre de "snaps" sera coloré en vert. Pour ceci, vous allez utiliser la directive[ngStyle].
Ajoutez un peu de style
Avant toute chose, je vous propose de prendre quelques instants pour donner un peu de style à votre component. En tant que développeur Angular, avoir des capacités de design (ou au moins de CSS !) est une compétence importante.
Je vous encourage à créer vos propres styles ici. Si jamais vous souhaitez continuer le cours sans le faire, je vous partage une idée. Vous pouvez remplacer le contenu de face-snap.component.scss avec le code ci-dessous :
.face-snap-card {
box-sizing: border-box;
width: 50%;
margin: 20px auto;
padding: 10px 30px;
box-shadow: lightgray 4px 4px 20px;
img {
width: 100%;
}
h2 {
margin-bottom: 0;
}
p {
font-weight: 300;
font-size: 16px;
}
button {
background-color: transparent;
box-sizing: border-box;
padding: 5px 10px;
border: none;
box-shadow: lightgray 3px 3px 7px;
margin-right: 20px;
outline: none;
font-size: 14px;
font-weight: 500;
&:active {
transform: translate(1px, 1px);
box-shadow: lightgray 0 0 5px;
}
}
}Notre objectif ici est de changer la couleur de texte du nombre de snaps en fonction du nombre de snaps – c'est parti !
Changez de style
Commencez par ajouter NgStyle aux imports de FaceSnapComponent :
// ...
import { NgStyle } from '@angular/common';
@Component({
selector: 'app-face-snap',
standalone: true,
imports: [
NgStyle
],
templateUrl: './face-snap.component.html',
styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent implements OnInit {
//...
}Il faut que vous puissiez cibler directement le nombre de snaps, donc ajoutez un <span> autour :
<span>🤌 {{ faceSnap.snaps }}</span>La directive [ngStyle] prendra comme argument un objet où :
les clés sont les styles CSS à modifier ;
les valeurs sont les valeurs que doivent prendre ces styles.
Pour utiliser directement le nombre de snaps comme valeur pour le vert de la couleur de texte, vous pouvez utiliser la fonction CSS rgb() :
<span [ngStyle]="{ color: 'rgb(0, ' + faceSnap.snaps + ', 0)' }">🤌 {{ faceSnap.snaps }}</span>Maintenant, si vous jouez avec le nombre de snaps de vos FaceSnaps, vous verrez la couleur du texte devenir de plus en plus verte :
Vous avez implémenté un style dynamique qui change avec le nombre de snaps d'un FaceSnap. Il existe d'autres situations où le style n'est pas proportionnel à une valeur dynamique, mais où on souhaiterait pouvoir appliquer une classe dans certains cas et pas dans d'autres. Heureusement, Angular nous propose une autre directive pour cette situation-là, et c'est le sujet du prochain chapitre !
En résumé
La directive
[ngStyle]permet d'appliquer des styles qui dépendent de valeurs dynamiques, comme un texte qui, plus il y a de snaps, devient de plus en plus vert.La directive
[ngStyle]prend comme argument un objet où les clés correspondent aux styles CSS à modifier, et les valeurs aux valeurs que doivent prendre ces styles.
Rendez-vous au prochain chapitre pour appliquer des classes dynamiquement !
