[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

Manipuler efficacement les classes CSS

La directive ngClass permet de changer la classe class et donc, de changer l'apparence

Voici un composant simple.

ts
import { Component } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgClass],
  template: `
    <p [ngClass]="{red: result%2, green: !(result%2)}">{{result}}</p>
    <button (click)="up()">Up</button>
  `,
  styles: `
    .red {
      color: red;
    }
    .green {
      color: green;
    }
  `
})
export class AppComponent {
  result = 0

  up() {
    this.result++;
  }
}

La directive ngClass peut avoir deux valeurs :

  • soit un tableau de classes. Par exemple ['red'] indiquera que l'élément aura la classe red;
  • soit un objet avec les classes en clé et un booléen en valeur. Par exemple : {red: true} indiquera que l'élément aura la classe red;

En août, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous être utiles pour booster vos projets. Inscrivez-vous maintenant et découvrez les dernières tendances et outils Angular directement dans votre boîte mail !