Angular2 Dynamic change CSS propriété

Nous faisons une application Angular2 et nous voulons être en mesure de créer une variable CSS globale (et de mettre à jour les valeurs des propriétés chaque fois que la variable est affectée).

nous avions utilisé Polymer pendant un certain temps (maintenant nous passons aux composants Angular2) et nous avions utilisé des propriétés CSS (Polymer a un peu de polyfill) et nous avions juste des styles de mise à jour en utilisant Polymer.updateStyles().

Y a-t-il un moyen de réaliser une fonction similaire?

Modifier:

Nous voulons quelque chose de similaire à Sass color: $g-main-color ou à css custom properties color: var(--g-main-color) et chaque fois que nous décidons de changer la valeur de la propriété, par exemple quelque chose comme updateVariable('g-main-color', '#112a4f'), il met à jour dynamiquement la valeur partout. Tout cela pendant qu'une application est en cours d'exécution.

MODIFIER 2:

Je veux utiliser des variables CSS globales dans différentes parties (hôte, élément enfant...) de mon CSS et être capable de changer la valeur immédiatement-Donc si je change ma variable-color, il changements partout dans l'application.

Je vais utiliser la syntaxe Sass par exemple: 

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

Est-il possible d'utiliser quelque chose comme des tuyaux angulaires? (mais il ne fonctionne soi-disant QU'en HTML) 

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }
61
demandé sur tenhobi 2015-10-25 12:53:35

5 réponses

Il suffit D'utiliser des variables CSS standard:

Votre CSS global (par exemple: styles.css) 

body {
  --my-var: #000
}

Dans le css o de votre composant, quel qu'il soit: 

span {
  color: var(--my-var)
}

Ensuite, vous pouvez modifier la valeur de la variable directement avec TS / JS en définissant le style en ligne à l'élément html: 

document.querySelector("body").style.cssText = "--my-var: #000";

Sinon, vous pouvez utiliser jQuery pour cela: 

$("body").css("--my-var", "#fff");
7
répondu Lemmy4555 2017-12-26 18:51:05

1) Utilisation des styles en ligne 

<div [style.color]="myDynamicColor">

2) Utilisez plusieurs classes CSS mappant à ce que vous voulez et changez de classe comme: 

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

Exemples de Code à partir de: https://angular.io/cheatsheet

Plus d'informations sur la directive ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

58
répondu Gerard Sans 2016-07-13 13:12:41

Vous n'avez pas d'exemple de code mais je suppose que vous voulez faire quelque chose comme ça?

@View({
directives: [NgClass],
styles: [`
    .${TodoModel.COMPLETED}  {
        text-decoration: line-through;
    }
    .${TodoModel.STARTED} {
        color: green;
    }
`],
template: `<div>
                <span [ng-class]="todo.status" >{{todo.title}}</span>
                <button (click)="todo.toggle()" >Toggle status</button>
            </div>`
})

Vous assigner ng-class à une variable qui est dynamique (une propriété d'un modèle appelé TodoModel comme vous pouvez le deviner).

todo.toggle() change la valeur de todo.status et là pour la classe de l'entrée change.

Ceci est un exemple pour le nom de classe, mais en fait, vous pouvez faire la même chose pour les propriétés css.

J'espère que c'est ce que vous vouliez dire.

Cet exemple est pris pour le un grand tutoriel de tête d'églantier ici .

5
répondu Shikloshi 2015-10-25 11:05:13

Je n'ai cette plunker pour explorer une façon de faire ce que vous voulez.

Ici, je reçois mystyle du composant parent, mais vous pouvez l'obtenir à partir d'un service.

import {Component, View} from 'angular2/angular2'

@Component({
  selector: '[my-person]',
  inputs: [
    'name',
    'mystyle: customstyle'
  ],
  host: {
    '[style.backgroundColor]': 'mystyle.backgroundColor'
  }
})
@View({
  template: `My Person Component: {{ name }}`
})
export class Person {}
2
répondu bertrandg 2015-10-27 11:14:05

Angulaire 6 + Alyle UI

Avec Alyle UI, vous pouvez changer les styles dynamiquement

Ici démo stackblitz

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AlyleUIModule.forRoot(
      {
        name: 'myTheme',
        primary: {
          default: '#00bcd4'
        },
        accent: {
          default: '#ff4081'
        },
        scheme: 'myCustomScheme', // myCustomScheme from colorSchemes
        lightGreen: '#8bc34a',
        colorSchemes: {
          light: {
            myColor: 'teal',
          },
          dark: {
            myColor: '#FF923D'
          },
          myCustomScheme: {
            background: {
              primary: '#dde4e6',
            },
            text: {
              default: '#fff'
            },
            myColor: '#C362FF'
          }
        }
      }
    ),
    LyCommonModule, // for bg, color, raised and others
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Html 

<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>

Pour changer le Style 

import { Component } from '@angular/core';
import { LyTheme } from '@alyle/ui';

@Component({ ... })
export class AppComponent  {
  classes = {
    card: this.theme.setStyle(
      'card', // key
      () => (
        // style
        `background-color: ${this.theme.palette.myColor};` +
        `position: relative;` +
        `margin: 1em;` +
        `text-align: center;`
         ...
      )
    )
  }
  constructor(
    public theme: LyTheme
  ) { }

  changeScheme() {
    const scheme = this.theme.palette.scheme === 'light' ?
    'dark' : this.theme.palette.scheme === 'dark' ?
    'myCustomScheme' : 'light';
    this.theme.setScheme(scheme);
  }
}

Référentiel Github

-2
répondu Enm 2018-05-20 03:31:24