defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.33/modules/angular2/src/core/annotations_impl/annotations.ts#L4-L778">angular2/src/core/annotations_impl/annotations.ts (line 4)</a>
We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
be used in templates with standard Angular syntax. For example:
```
@Directive({
selector: '[tooltip]',
properties: [
'text: tooltip'
]
})
class Tooltip {
set text(value: string) {
// This will get called every time with the new value when the 'tooltip' property changes
}
}
```
We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
string literal, as shown in the HTML template below:
```html
<div [tooltip]="someExpression">...</div>
<div tooltip="Some Text">...</div>
```
Whenever the `someExpression` expression changes, the `properties` declaration instructs
Angular to update the `Tooltip`'s `text` property.
## Bindings With Pipes
You can also use pipes when writing binding definitions for a directive.
For example, we could write a binding that updates the directive on structural changes, rather
than on reference changes, as normally occurs in change detection.
See <a href='../change_detection/Pipe-interface.html'><code>Pipe</code></a> and <a href='../pipes/KeyValueChanges-class.html'><code>KeyValueChanges</code></a> documentation for more details.
```
@Directive({
selector: '[class-set]',
properties: [
'classChanges: classSet | keyValDiff'
]
})
class ClassSet {
set classChanges(changes: KeyValueChanges) {
// This will get called every time the `class-set` expressions changes its structure.
}
}
```
The template that this directive is used in may also contain its own pipes. For example:
```html
<div [class-set]="someExpression | somePipe">
```
In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
keyValDiff`.
.l-sub-section
h3 events
:markdown
Enumerates the set of emitted events.
## Syntax
```
@Component({
events: ['statusChange']
})
class TaskComponent {
statusChange: EventEmitter;
constructor() {
this.statusChange = new EventEmitter();
}
onComplete() {
this.statusChange.next('completed');
}
}
```
Use `propertyName: eventName` when the event emitter property name is different from the name
of the emitted event:
```
@Component({
events: ['status: statusChange']
})
class TaskComponent {
status: EventEmitter;
constructor() {
this.status = new EventEmitter();
}
onComplete() {
this.status.next('completed');
}
}
```
.l-sub-section
h3 host
:markdown
Specifiy the events, actions, properties and attributes related to the host element.
## Events
Specifies which DOM hostListeners a directive listens to via a set of `(event)` to `method`
key-value pairs:
- `event1`: the DOM event that the directive listens to.
- `statement`: the statement to execute when the event occurs.
If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
event.
To listen to global events, a target must be added to the event name.
The target can be `window`, `document` or `body`.
When writing a directive event binding, you can also refer to the following local variables:
- `$event`: Current event object which triggered the event.
- `$target`: The source of the event. This will be either a DOM element or an Angular
directive. (will be implemented in later release)
## Syntax
```
@Directive({
host: {
'(event1)': 'onMethod1(arguments)',
'(target:event2)': 'onMethod2(arguments)',
...
}
}
```
## Basic Event Binding:
Suppose you want to write a directive that reacts to `change` events in the DOM and on
`resize` events in window.
You would define the event binding as follows:
```
@Directive({
selector: 'input',
host: {
'(change)': 'onChange($event)',
'(window:resize)': 'onResize($event)'
}
})
class InputDirective {
onChange(event:Event) {
// invoked when the input element fires the 'change' event
}
onResize(event:Event) {
// invoked when the window fires the 'resize' event
}
}
```
## Properties
Specifies which DOM properties a directives updates.
## Syntax
```
@Directive({
selector: 'input',
host: {
'[prop]': 'expression'
}
})
class InputDirective {
value:string;
}
```
In this example the prop property of the host element is updated with the expression value
every time it changes.
## Attributes
Specifies static attributes that should be propagated to a host element. Attributes specified
in `hostAttributes` are propagated only if a given attribute is not present on a host element.
## Syntax
```
@Directive({
selector: '[my-button]',
host: {
'role': 'button'
}
})
class MyButton {
}
```
In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
(here: `<div>` ) will ensure that this element will get the "button" role.
## Actions
Specifies which DOM methods a directive can invoke.
## Syntax
```
@Directive({
selector: 'input',
host: {
'@emitFocus': 'focus()'
}
})
class InputDirective {
constructor() {
this.emitFocus = new EventEmitter();
}
focus() {
this.emitFocus.next();
}
}
```
In this example calling focus on InputDirective will result in calling focus on the input.
.l-sub-section
h3 lifecycle
:markdown
Specifies which lifecycle should be notified to the directive.
See <a href='LifecycleEvent-enum.html'><code>LifecycleEvent</code></a> for details.
.l-sub-section
h3 compileChildren
:markdown
If set to false the compiler does not compile the children of this directive.
