Add custom css rule with angular

Question

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?

It could be possible to simply have the rules in your own CSS file, but preface them all with a particular class (eg .ownStyle .myThing). Then, to turn it on, add that class to a containing element. — Katana314
– Katana314, Commented Aug 15, 2016 at 13:29

Alexis Bianchi · Accepted Answer · 2016-08-15 13:38:29Z

3

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>

answered Aug 15, 2016 at 13:38

Alexis Bianchi

564 bronze badges

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

1 Comment

Boris Parnikel Over a year ago

Yes, this solution is better!

Razzka · Accepted Answer · 2016-08-15 13:34:57Z

1

You can use ng-class directive.

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

answered Aug 15, 2016 at 13:34

Razzka

6415 silver badges16 bronze badges

Comments

Igor Janković · Accepted Answer · 2016-08-15 13:36:25Z

1

You can use ng-class built in directive.

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

answered Aug 15, 2016 at 13:36

Igor Janković

5,5326 gold badges34 silver badges47 bronze badges

Collectives™ on Stack Overflow

Add custom css rule with angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related