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

i want apply css class 'headerstyle' change color attribute defined in 'headerstyle' when user choose color color picker this. catch want use ng-class. possible able using ng-class, have done same thing using mixture of class , ng-style wish using ng-class only.

html code :

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

i tried not working - header div :

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

and this-

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

here 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

<div class= "headerstyle" ng-class= "{'background-color' : headercolor}"> 

should enough. don't need put static class ng-class. ng-class add other classes static ones.

if headercolor evaluate true. result :

<div class= "headerstyle background-color"> 

edit :

according comment, need ng-style.

<div class= "headerstyle" ng-style="divstyle"> 

and in js :

$scope.headercolor = "#ffffff"; $scope.divstyle = {      background-color : $scope.headercolor } 

some precision

ng-class :

ng-class used define class element according values. purpose add dynamic classes

ng-style :

ng-style used give style object custom css. purpose add dynamic style

here plunker 2 working exemples