101 lines
1.8 KiB
Plaintext
101 lines
1.8 KiB
Plaintext
|
|
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: '[class]',
|
|
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
|
|
properties: ['rawClass: class']
|
|
})
|
|
|
|
|
|
.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
|
|
|
|
|
|
|
|
|
|
|
|
|