|
Publié le par Chloé MAHALIN

Angular 4

Conditionner le style CSS d'un composant

Pour les cas ou le style d'une page web est dépendant des actions de l'utilisateur, il est possible de variabiliser le css.

Cela peut être utile pour :

  • Changer la couleur d'un composant en fonction d'un statut (ex : TODO - IN PROGRESS - DONE)
  • Masquer un composant à l'aide de CSS en fonction de l'état de la page web
  • Gérer des animations suivant une conditionnelle
  • ...

En voici quelques exemples :

Conditionner l'application du style

component.ts

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

@Component({
  selector: 'selector',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class MyComponent {

    isVisible = false;

}

component.css

my-class {
    display: none;
}

component.html

<div>
    <div [ngClass]="{'my-class': isVisible }">
        Hello
    </div>

    <div [ngClass]="{'my-class': !isVisible }">
        Welcome
    </div>
    <button (click)="isVisible = !isVisible;">Toggle style</button>
</div>

Ou alors :

component.ts

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

@Component({
  selector: 'selector',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class MyComponent {

    isVisible = false;

}

component.css

my-class {
    display: none;
}

component.html

<div>
    <div [class.my-class]="isVisible">
        Hello
    </div>

    <div [class.my-class]="!isVisible">
        Welcome
    </div>
    <button (click)="isVisible = !isVisible;">Toggle style</button>
</div>

Récupérer le style sous la forme d'une variable

component.ts

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

@Component({
  selector: 'selector',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class MyComponent {

    getYellowStyle() {
        return "yellow";
    }

    getBlueStyle() {
        return "blue";
    }
}

component.html

<div>
    <div [style.background-color]="getYellowStyle()">
        This is a yellow div
    </div>

    <div [style.background-color]="getBlueStyle()">
        This is a blue div
    </div>
</div>