CODEWITHSUNDEEP
cssangularjs
Boris Parnikel
Boris Parnikel

Reputation: 863

Add custom css rule with angular

I want to make an application with dynamic theming. For example, there is a button, you click it and color of some elements changes by some rule. First idea - do it with 

<style type="text/css" ng-bind="ownStyle"></style>

and init ownStyle in $rootScope:

$rootScope.ownStyle = "* {color: green }";

But it seems awful + it's too hard to write css rules as string. Is there a more elegancy way to do it?

Upvotes: 1

Views: 1686

Answers (3)

Alexis Bianchi
Alexis Bianchi

Reputation: 56

Can try something like this..

$rootScope.color = red;

$scope.changecolor = function(){
  $rootScope.color = blue;  
}
/* Base color */
.dinamic{
  background-color: white;  
}
<style>
  .dinamic{
    background-color: {{$rootScope.color}} !important;
  }
</style>

<button class="dinamic">I Will Change Color</button>

Upvotes: 3

Igor Janković
Igor Janković

Reputation: 5532

You can use ng-class built in directive.

<div ng-class="{'some-class': condition}></div>

Upvotes: 1

Razzka
Razzka

Reputation: 641

You can use ng-class directive.

Just add this directive to "some elements", set proper condition and it'll be fine.

Upvotes: 1

Related Questions