• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 12/11/2024

Ajoutez du style dynamique

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 :

Moins de snaps…
Moins de snaps…
Avec 160 snaps, le texte est déjà bien vert
Plus de snaps !

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 ! 

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite