Informatique
Publié le 06/15/2017, rédigé 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

Cela peut être utile pour :

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>

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité