Dart Documentationangular.directiveNgStyleDirective

NgStyleDirective class

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

@example

    <span ng-style="{color:'red'}">Sample Text</span>
@NgDirective(
   selector: '[ng-style]',
   map: const { 'ng-style': '@styleExpression'})
class NgStyleDirective {
 dom.Element _element;
 Scope _scope;

 String _styleExpression;

 NgStyleDirective(dom.Element this._element, Scope this._scope);

 Function _removeWatch = () => null;
 var _lastStyles;

/**
 * ng-style attribute takes an expression hich evals to an
 *      object whose keys are CSS style names and values are corresponding values for those CSS
 *      keys.
 */
 set styleExpression(String value) {
   _styleExpression = value;
   _removeWatch();
   _removeWatch = _scope.$watchCollection(_styleExpression, _onStyleChange);
 }

 _onStyleChange(Map newStyles) {
   dom.CssStyleDeclaration css = _element.style;
   if (_lastStyles != null) {
     _lastStyles.forEach((val, style) { css.setProperty(val, ''); });
   }
   _lastStyles = newStyles;

   if (newStyles != null) {
     newStyles.forEach((val, style) { css.setProperty(val, style); });
   }
 }
}

Constructors

new NgStyleDirective(Element _element, Scope _scope) #

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
NgStyleDirective(dom.Element this._element, Scope this._scope);

Properties

dynamic set styleExpression(String value) #

ng-style attribute takes an expression hich evals to an

 object whose keys are CSS style names and values are corresponding values for those CSS
 keys.
set styleExpression(String value) {
 _styleExpression = value;
 _removeWatch();
 _removeWatch = _scope.$watchCollection(_styleExpression, _onStyleChange);
}