web-dev-qa-db-fra.com

Générer des css dynamiques basés sur des variables angular

Je travaille sur un panneau d'administration développé avec angular 4) et j'essaie d'intégrer une section pour personnaliser le style, par exemple changer de couleur, bg, etc. J'ai déjà développé une section pour enregistrer les paramètres dans la base de données. App charge en tant que JSON en utilisant l'API.

Maintenant, j'essaie de générer un fichier CSS dynamique en utilisant les valeurs de JSON. J'ai essayé avec le code suivant dans le composant principal, mais cela ne fonctionne pas.

@Component({
      templateUrl: 'card.html',
      styles: [`
        .card {
          height: 70px;
          width: 100px;
          color: {{css.cardColor}};
        }
      `],
})

Je ne suis pas sûr de savoir comment charger les valeurs CSS dans le composant et les utiliser dans la balise style. Je n'ai trouvé aucune autre solution pour la même chose.

Une autre méthode consiste à utiliser le concept d'animation angular mais le css va être énorme et il n'est pas possible de le mettre en œuvre complet avec angular à l'aide de déclencheurs et de tous. Je pense qu'il existe une solution à cela car cela semble être une exigence réelle et aurait dû être remplie par de nombreux autres développeurs.

Toute aide est appréciable.

Edit: ne peut pas utiliser ngStyle car son application s’appliquera à presque tous les éléments, mais pas uniquement à des éléments spécifiques.

javascriptcssangulartypescriptangular2-template
20
Vikram

Après être passé par différentes méthodes et approché pour ajouter du css dynamique à toutes les pages de angular), je me suis retrouvé avec les solutions suivantes.

Condition préalable: générer des fichiers CSS dynamiques basés sur les valeurs renvoyées par et une API pour modifier la conception et le style.

Solution :

  1. créer un nouveau composant et créer un service pour charger des variables CSS dynamiques à partir de l'API.
  2. Ajoutez une balise de style dans le fichier de modèle et utilisez des valeurs de variable pour les propriétés.
  3. Chargez ce modèle sur toutes les pages ou sur le modèle principal.
  4. Le style de construction de l'application sera déplacé vers la balise head.

Échantillon de code

import { CssService} from './Css.service';

@Component({
  selector: 'DynamicCss',
  templateUrl: './DynamicCss.component.html',
  styleUrls: ['./DynamicCss.component.scss']
})
export class ServiceProviderComponent implements OnInit {
    cssVariables: any;
    constructor(private cssService:CssService){
        /* call the service/api to get the css variable values in cssVariables */

    }
}

Maintenant, appliquez css en utilisant jquery ou javascript pour ajouter css avec l'aide d'une fonction comme suit

appendCss(customData)
{
     let text = '.custom-form-1 {
            background-image: url("`+customData.background_image+`");
         }';
     $(document).ready(function(){
         $("style").append(text);
      });
}

et appelez cette fonction après avoir chargé des données personnalisées depuis le service ou une autre variable comme je l'ai fait ngOnInit

ngOnInit(){
 this.appendCss(this.customizeFormData);
}

Son utilisation de jquery mais peut être fait avec javascript/TypeScript aussi si vous ne voulez pas utiliser jquery dans votre angular app

Autre ressource utile https://github.com/angular/angular/issues/9343#issuecomment-312035896

15
Vikram

vous pouvez utiliser ngStyle pour ajouter le css dyanaically à votre page à partir de JSON.

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

Un autre exemple de même peut être

 <div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover'  }"></div>

ici j'ai chargé l'image de fond du json

16
Ajinkya Dhote

Vous ne pouvez relier que style.color:

<div class="card" [style.color]=cardColor>lorem ipsum</div>
5
Eliseo

ngClass est utilisé pour définir la base de classe dynamique de votre valeur de variable comme ci-dessous

Composant du fichier Ts:

@Component ({
    selector:'simple-comp',
    template:`   <ol class="breadcrumb">
        <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
        <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
        <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
       </ol>`
})

export class SimpleComponent {
    public step: string = 'step1'; // change value like step1, step2, step3
}

Code HTML:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">
 ...
</some-element>
3
Rohan Fating

Je ne dis pas que c'est applicable mais le angular/flex-layout La bibliothèque manipule beaucoup de styles. Regarder le code source peut aider à vous donner des idées.

N'oubliez pas de tirer parti des directives, des services/injection de dépendance.

Par exemple, voici quelques classes utiles dans la bibliothèque flex-layout qui peuvent être pertinentes:

StyleUtils , StyleDirective , MatchMedia (création dynamique d'une balise de feuille de style)

0
Simon_Weaver