Manipuler efficacement les classes CSS ​

Préalablement: Ajoutons CommonModule ​

Pour utiliser le cette directive, vous devez d'abord inclure CommonModule dans votre application en l'ajoutant à la liste des imports dans votre fichier de module principal

import { CommonModule } from '@angular/core';

@NgModule({
  declarations: [
    // Ici, le composant qui contient la directive
  ],
  imports: [
    // ... autre modules
    CommonModule
  ],
})
export class MonModule { }

import { CommonModule } from '@angular/core';

@NgModule({
  declarations: [
    // Ici, le composant qui contient la directive
  ],
  imports: [
    // ... autre modules
    CommonModule
  ],
})
export class MonModule { }

Si vous mettez pas le module, vous aurez l'erreur suivante: Can't bind to '<nom de la directive>' since it isn't a known property of 'div'

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

Voici un composant simple.

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <p [ngClass]="{red: result%2, green: !(result%2)}">{{result}}</p>
    <button (click)="up()">Up</button>
  `
})
export class AppComponent {
  result: number = 0

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

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <p [ngClass]="{red: result%2, green: !(result%2)}">{{result}}</p>
    <button (click)="up()">Up</button>
  `
})
export class AppComponent {
  result: number = 0

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

Lorsque l'utilisateur clique, un compteur s'incrémente. Quand le nombre est pair, il est coloré en rouge sinon en vert. Pour réaliser cela, nous avons un fichier style.css à la racine :

.red {
  color: red;
}
.green {
  color: green;
}

.red {
  color: red;
}
.green {
  color: green;
}

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;