Dart Documentationangular.directiveNgClassDirective

NgClassDirective class

The ngClass allows you to set CSS classes on HTML an element, dynamically, by databinding an expression that represents all classes to be added.

The directive won't add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then the new classes are added.

The result of the expression evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

Examples

index.html:

<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
<input type="checkbox" ng-model="bold"> bold
<input type="checkbox" ng-model="strike"> strike
<input type="checkbox" ng-model="red"> red
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold"><br>
<input ng-model="style2" placeholder="Type: strike"><br>
<input ng-model="style3" placeholder="Type: red"><br>

style.css:

.strike {
  text-decoration: line-through;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
}
@NgDirective(
   selector: '[ng-class]',
   map: const {'ng-class': '@valueExpression'})
class NgClassDirective extends _NgClassBase {
 NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs)
     : super(element, scope, null, attrs);
}

Extends

_NgClassBase > NgClassDirective

Constructors

new NgClassDirective(Element element, Scope scope, NodeAttrs attrs) #

Creates a new Object instance.

Object instances have no meaningful state, and are only useful through their identity. An Object instance is equal to itself only.

docs inherited from Object
NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs)
   : super(element, scope, null, attrs);

Properties

var currentSet #

inherited from _NgClassBase
var currentSet = []

final Element element #

inherited from _NgClassBase
final dom.Element element

final int mode #

inherited from _NgClassBase
final int mode

final NodeAttrs nodeAttrs #

inherited from _NgClassBase
final NodeAttrs nodeAttrs

var previousSet #

inherited from _NgClassBase
var previousSet = []

final Scope scope #

inherited from _NgClassBase
final Scope scope

dynamic set valueExpression(currentExpression) #

inherited from _NgClassBase
set valueExpression(currentExpression) {
 // this should be called only once, so we don't worry about cleaning up
 // watcher registrations.
 scope.$watchCollection(currentExpression, (current) {
   currentSet = _flatten(current);
   _handleChange(scope[r'$index']);
 });
 if (mode != null) {
   scope.$watch(r'$index', (index, oldIndex) {
     var mod = index % 2;
     if (oldIndex == null || mod != oldIndex % 2) {
       if (mod == mode) {
         element.classes.addAll(currentSet);
       } else {
         element.classes.removeAll(previousSet);
       }
     }
   });
 }
}