Appearance
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 classered
; - 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 classered
;