angular-cn/public/docs/js/latest/api/directives/CSSClass-class.jade

p.location-badge.
  exported from <a href='../directives'>angular2/directives</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/directives/class.ts#L11-L110">angular2/src/directives/class.ts (line 11)</a>

:markdown
  Adds and removes CSS classes based on an {expression} value.
  
  The result of expression is used to add and remove CSS classes using the following logic,
  based on expression's value type:
  - {string} - all the CSS classes (space - separated) are added
  - {Array} - all the CSS classes (Array elements) are added
  - {Object} - each key corresponds to a CSS class name while values
  are interpreted as {boolean} expression. If a given expression
  evaluates to {true} a corresponding CSS class is added - otherwise
  it is removed.
  
  # Example:
  
  ```
  <div class="message" [class]="{error: errorCount > 0}">
      Please check errors.
  </div>
  ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Directive
    pre.prettyprint
      code.
        @Directive({
          selector: &#39;[class]&#39;,
          lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
          properties: [&#39;rawClass: class&#39;]
        })


.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer)
    
    :markdown
      
      




  .l-sub-section
    h3 rawClass

    
    :markdown
      
      





  .l-sub-section
    h3 onCheck

    
    pre.prettyprint
      code.
        onCheck()
    
    :markdown
      
      





  .l-sub-section
    h3 onDestroy

    
    pre.prettyprint
      code.
        onDestroy()
    
    :markdown