Dynamically Change a CSS Class' Properties with Angularjs

How to change a CSS property dynamically in AngularJS

You can use ng-style to dynamically change a CSS class property using AngularJS.

Hope this ng-style example will help you to understand the concept at least.

More information for ngStyle

var myApp = angular.module('myApp', []);myApp.controller("myAppCtrl", ["$scope", function($scope) {      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];      $scope.style = function(value) {          return { "background-color": value };      }}]);

ul{  list-style-type: none;  color: #fff;}li{  padding: 10px;  text-align: center;}.original{  background-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><body ng-app="myApp"><div ng-controller="myAppCtrl">  <div class="container">    <div class="row">      <div class="span12">        <ul>          <li ng-repeat="color in colors">            <h4 class="original" ng-style="style(color)"> {{ color }}</h4>          </li>        </ul>      </div>    </div>  </div></div></body>

Dynamically change a css class' properties with AngularJS

Actually I found a solution that doesn't involve :after (I'm so bad in CSS I haven't thought about it sooner ...)
I also learn a bit in CSS. Here goes :

<css>
.bs-docs-example {
   background-color: #FFFFFF;
   border: 1px solid #DDDDDD;
   border-radius: 4px 4px 4px 4px;
   ...
}
.bs-docs-example-title {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Title";
  ...
}

and use it like this :

<html>
<div class="bs-docs-example" ng-repeat="title in titles">
<span class="bs-docs-example-title">{{ title }}</span>
</div>

I hoped that helps.

Changing class dynamically in AngularJS

I think what you need is ng-class.

Here is a good example of how to use ng-class: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-class

The basic idea is that

you can use $scope.yourVar to define a variable.
change the variable to the class name you desire.
change your i tag to something like this: <i ng-class="yourVar">

Generate dynamic css based on variables angular

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

Set css class to list options dynamically AngularJS

Use ng-class directive like in a code below.

<div class="list">
           <p class="subheader secondary">Select Preferred View</p>
           <ul class="tabs">
           <li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
           <li><a href="#quarterly" ng-click="type='quarter'" ng-class="{'active' : type=='quarter'}" data-ajax="false">Quarterly</a></li>
   </ul>
  </div>

It adds specified class when expression given after classname evaluates to true and removes it when it evaluates to false.

ng-class="{'classname' : expression}"

You can set a default value in a controller:

$scope.type = 'month';

or via ng-init directive on div:

<div class="list" ng-init="type='month'">

jsfiddle with example

jsfiddle with setting default in ng-init

Changing CSS dynamically AngularJS

Look like you are doing reverse ?

You assigned class to elements. and then download the style of each class later from JSON.

You can just embed those style to you document

usercss = '.div-recipe-cost{position: ab........'; // Your css

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = usercss;
document.body.appendChild(css);