Improve this doc  View Source

ngStyle

  1. - directive in module ng

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

Directive Info

Usage

Arguments

Param Type Details
ngStyle expression

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

Example

  Edit in Plunker
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
span {
  color: black;
}
var colorSpan = element(by.css('span'));

it('should check ng-style', function() {
  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
  element(by.css('input[value=set]')).click();
  expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)');
  element(by.css('input[value=clear]')).click();
  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
});