Appearance
Manipuler le style CSS avec la directive ngStyle ​
Comme avec ngClass
, nous pouvons changer l'apparence avec ngStyle
. La différence est qu'on modifie l'attribut style
. Pas besoin de fichier CSS externe :
ts
import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgStyle],
template: `
<p [ngStyle]="{color: color}">{{result}}</p>
<button (click)="up()">Up</button>
`
})
export class AppComponent {
result = 0;
color = 'red';
up() {
this.result++;
this.color = this.result % 2 ? 'red' : 'green';
}
}
ngStyle
est un objet avec la propriété CSS avec sa valeur CSS.
Deux moyens d'Ă©crire les valeurs CSS : Soit en kebab case :
font-weight
Soit en camel case :fontWeight