how to apply css class and also change css attribute dynamically in angularjs using ng-class?

Question

I Want to apply a css class say 'headerStyle' but also change the color attribute defined in 'headerStyle' when the user choose a color from color picker like this. The catch is that I only want to use ng-class. Is it possible to be able to do it using only ng-class, I have done the same thing using mixture of class and ng-style but wish to do it using ng-class only.

HTML Code :

<input colorpicker type="text" ng-model="headerColor">

I tried like this but not working - Header Div :

<div ng-class="[headerStyle:true, {'background-color' : headerColor}]">

and also like this-

<div ng-class= "{headerStyle:true, 'background-color' : headerColor}">

Here is my css class headerStyle -

 .headerStyle {
       font-family: Helvetica, Arial, sans-serif !important;
       padding-top: 4px;
       font-size: 15px;
       color: #ffffff;
       text-align: center;
       text-shadow: #666666 1px 1px 1px;
       line-height: 16px;
       border: none;
  }

Thanx in Advance

Why do youw ant to use only ng-class instead of using ng-class to express a conditional class and ng-style to express an additional inline override style? The latter sounds a lot more readable and self expressive to me — LionC
– LionC, Commented Jun 10, 2015 at 13:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

<div class= "headerStyle" ng-class= "{'background-color' : headerColor}">

Should be enough. You don't need to put a static class into ng-class. ng-class will add the other classes to the static ones.

If headerColor evaluate to true. The result will be :

<div class= "headerStyle background-color">

EDIT :

According to your comment, your need is ng-style.

<div class= "headerStyle" ng-style="divStyle">

And in your js :

$scope.headerColor = "#FFFFFF";
$scope.divStyle = {
     background-color : $scope.headerColor
}

Some precision

ng-class :

ng-class is used to define class for an element according to some values. Its purpose is to add dynamic classes

ng-style :

ng-style is used to give a style object with some custom css. Its purpose is to add dynamic style

Here is a plunker with two working exemples

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 10, 2015 at 13:16

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

4 Comments

user3497581 Over a year ago

headerColor is a hexa code of the color selected via colorpicker

user3497581 Over a year ago

Thanku Okazari, but I was asked not to use inline CSS that's why I was looking for only using ng-class, but is it the better approach to go through the way you suggested ?

Okazari Over a year ago

@user3497581I'm not a pro into CSS. But i usually give a choice between a fixed amount of colors. And i got a css class for each one overiding the background-color. Then i use ng-class to chose the good one. i'll make a plunker to be more concrete.

Okazari Over a year ago

@user3497581 Added a plunker plnkr.co/edit/m2kVgVyskpQR33aB4K0H?p=preview to illustrate. I really agree that inline style isn't a good practice. But in this case i don't have any other "simple" solution in mind.

Collectives™ on Stack Overflow

how to apply css class and also change css attribute dynamically in angularjs using ng-class?

1 Answer 1

EDIT :

Some precision

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT :

Some precision

4 Comments

Related