Generate dynamic css based on variables angular

Question

I'm 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}};
        }
      `],
})

How to we reference property values inside the styles declaration?

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.

I think this would make an excellent feature request.

bvdb
– bvdb

2019-07-23 09:47:14 +00:00
Commented Jul 23, 2019 at 9:47 — bvdb
– bvdb, Commented Jul 23, 2019 at 9:47

Rafael · Accepted Answer · 2021-12-20 18:34:20Z

56

You can use ngStyle to dynamically add the css to your page from json.

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

An another example:

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

here I have loaded background image from json-data.

edited Dec 20, 2021 at 18:34

Rafael

2,1572 gold badges28 silver badges66 bronze badges

answered Sep 5, 2017 at 5:28

Ajinkya Dhote

1,4883 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vikram Over a year ago

Thats a good suggestion Ajinkya but as I mentioned its going to be a huge css and will be applied to almost every element. so can not use ngStyle

Ajinkya Dhote Over a year ago

@Vikram, an issue has been already filed for this https://github.com/angular/angular/issues/7108 there are some suggestion as well, this might be helpful to you

Vikram · Accepted Answer · 2020-07-30 11:36:02Z

38

Direct approach available in angular is using ngstyle as follows

<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>

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 :

create a new component and create a service to load dynamic css variables from API.
Add style tag in template file and use variable values for properties.
Load this template on all pages or on main template.
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

edited Jul 30, 2020 at 11:36

answered Oct 3, 2017 at 2:47

Vikram

3,3917 gold badges39 silver badges70 bronze badges

10 Comments

Vignesh.N Over a year ago

you should post the code solution here. can you please show how you use the variable values inside css style properties ?

Neutrino Over a year ago

can you post some code example of this solution? This looks to be a really good solution.

Mateo Tibaquira Over a year ago

I just tried this with Angular 4 and Angular CLI ~1.6.0 and didn't work, but this worked: github.com/angular/angular/issues/9343#issuecomment-312035896

Ninja Coding Over a year ago

this answer is incomplete.

Vikram Over a year ago

@NinjaCoding And in what terms its incomplete ?

|

Eliseo · Accepted Answer · 2020-01-22 07:31:12Z

17

You can bind only style.color:

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

edited Jan 22, 2020 at 7:31

answered Sep 5, 2017 at 6:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2019-07-11 07:12:01Z

6

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>

edited Jul 11, 2019 at 7:12

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Sep 5, 2017 at 5:37

Rohan Fating

2,13317 silver badges24 bronze badges

Comments

Fahimeh Ahmadi · Accepted Answer · 2020-07-13 05:16:54Z

2

For background use, the JSON method is used for color:

<ion-list-header class="background-size"
[ngStyle]="{'background-image': 'url(' + data.headerImage + ')'}"
*ngIf="data.headerImage != null">

edited Jul 13, 2020 at 5:16

answered Jun 9, 2020 at 12:56

Fahimeh Ahmadi

1,04312 silver badges14 bronze badges

2 Comments

ysf Over a year ago

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.

Simon_Weaver Over a year ago

Can you or someone else explain: "The JSON method is used for color"

Matt Saunders · Accepted Answer · 2020-01-27 15:04:00Z

I wanted to dynamically style an element nested within a component, (specifically http://tb.github.io/ng2-nouislider/), so similar to the OP, ngStyle was not suitable.

My approach was to use a reference variable in my template (https://angular.io/api/core/ViewChild) to access the native element of the component and find the target child node using querySelector (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).

The required style was then applied with Renderer 2. Example below and on https://stackblitz.com/edit/angular-r3bs1d.

import { Component, Renderer2, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit  {
    backgroundColour = '#ff0000';
    constructor(private renderer: Renderer2) { }
    @ViewChild('parent', { static: false }) parent;
    ngAfterViewInit(){
        this.renderer.setStyle(this.parent.nativeElement.querySelector('.child'), 'background', this.backgroundColour);
    }
}

HTML:

<div #parent>
    <div class="child">Child Element</div>
</div>

For minor styling changes at least, I think this is a feasible solution.

Collectives™ on Stack Overflow

Generate dynamic css based on variables angular

6 Answers 6

2 Comments

10 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

10 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related