Generate dynamic css based on variables angular

问题:

I am working on a admin panel developed with angular 4 and trying to integrate a sections to customize styling like change color, bg etc. I already have developed a sections to save settings in database got them on app load as json using API.

Now I am trying to generate a dynamic css using values from json, I tried with following code in main component but its not working

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

I am not sure how I should load the css values in component and use them in style tag. I didnt find any other solution for same.

Another way is to use angular animation concept but the css is going to be huge and its not possible to implements it whole with angular animation using triggers and all. I believe there is a solution for this as it seems a genuine requirements and should have done by lots of other developers.

Any help is appreciable.

Edit : can not use ngStyle as its going to be applied on almost all elements as its for whole application and not only for specific element.

回答1:

you can use ngStyle to dyanaically add the css to your page from json.

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

An another example of same can be

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

here i have loaded background image from the json

回答2:

After going through different methods and approached to add dynamic css to all pages on angular app I ended up with following solutions.

Requirement : generate dynamic css based on values returned from and API to change design and styling.

Solution :

1. create a new component and create a service to load dynamic css variables from API.
2. Add style tag in template file and use variable values for properties.
3. Load this template on all pages or on main template.
4. On app build style will be moved to head tag.

Code sample

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 */

    }
}

Now apply css using jquery or javascript to append css with help of function like following

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

and call this function after loading custom data from service or other variable like I did it ngOnInit

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

Its using jquery but can be done with javascript/typescript as well if you dont want to use jquery in your angular app

Other useful resource https://github.com/angular/angular/issues/9343#issuecomment-312035896

回答3:

You can bind only style.color:

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

回答4:

ngClass is used to set the dynamic class basis of your variable value as below

Ts File Component:

@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
}

HTML Code:

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

回答5:

I'm not saying it's applicable but the angular/flex-layout library does a lot of manipulation of styles.Looking at the source-code may help give you some ideas.

Remember to take advantage of directives, services/dependency injection.

For example here's a few useful classes in the flex-layout library that may be relevant:

StyleUtils, StyleDirective, MatchMedia (dynamically create stylesheet tag)