ngStyle

- directive in module ng

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

Directive Info

This directive executes at priority level 0.

Usage

as attribute:

<ANY
  ng-style="expression">
...
</ANY>

as CSS class:

<ANY class="ng-style: expression;"> ... </ANY>

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. Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below.

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.

Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below.

Example

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<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 color\']')).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)');
});

Load online demo