📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

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;

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !