📢 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 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

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