ng-class and class css/style atrributes - angularjs

Question

I do not know when use one over the other and when I should use both at the same time for an html element (div, span, table, etc). Please advise. Mixing both of them may cause some issues, mayn't it?

Answer 1

Ngclass is used when you need the class to be conditional based on some logic
Such as ng-class="{'choose-this-class': ifThisAngularScopeIsTrue}"
Class is just a fixed class of css

Answer 2

The ng-class directive dynamically binds one or more CSS classes to an HTML element.
Eg: ng-class

Answer 3

You should use class and style attributes as you see fit to your desired designs. The ng-class directive is generally used when you want to change some html's class based on some variable or expression.
Here's a simple example
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.blue {
height: 100px;
width: 100%;
background-color: blue;
display: block;
}
.red {
height: 100px;
width: 100%;
background-color: red;
display: block;
}
</style>
<div ng-app="app">
<div style="height: 100px; width 100%; background-color: red; display: block;" ng-class="{'red': red == true, 'blue': red == false}"></div>
<br />
<button ng-click="red = !red">Changing Red to Blue won't work because of the style attribute!</button>
<br />
<br />
<div class="blue" ng-class="{'blue': blue, 'red': !blue}"></div>
<br />
<button ng-click="blue = !blue">Toggle between Red & Blue</button>
</div>
Notice how inline style attribute overwrites the class ;)
Do read this for further insight.