Angular

Appearance

Manipuler le style CSS avec la directive ngStyle ​

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

ts
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'

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 :

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

@Component({
  selector: 'app',
  template: `
    <p [ngStyle]="{color: color}">{{result}}</p>
    <button (click)="up()">Up</button>
  `
})
export class AppComponent {
  result: number = 0;
  color: string = 'red';

  up() {
    this.result++;
    this.color = this.result % 2 ? 'red' : 'green';
  }
}
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <p [ngStyle]="{color: color}">{{result}}</p>
    <button (click)="up()">Up</button>
  `
})
export class AppComponent {
  result: number = 0;
  color: string = '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