NgClass

The NgClass directive conditionally adds and removes CSS classes on an HTML element based on an expression's evaluation result.

The result of an expression evaluation is interpreted differently depending on type of the expression evaluation result:

• String - all the CSS classes listed in a string (space delimited) are added

• List - all the CSS classes (List elements) are added

• Object - each key corresponds to a CSS class name while values are interpreted as expressions evaluating to bool. If a given expression evaluates to true a corresponding CSS class is added - otherwise it is removed.

While the NgClass directive can interpret expressions evaluating to String, Array or Object, the Object-based version is the most often used and has an advantage of keeping all the CSS class names in a template.

Examples

<div [ngClass]="setClasses()">This div is saveable and special</div>

Map<String, bool> setClasses() { final classes = { 'saveable': canSave, // true 'modified': !isUnchanged, // false 'special': isSpecial // true }; // compensate for DevMode (sigh) if (JSON.encode(_previousClasses) == JSON.encode(classes)) return _previousClasses; _previousClasses = classes; return classes; }

Try the live example. See the Template Syntax section on ngClass for more details.