) {
+ }
+ }
+ ```
+
+ This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
+
+ ### Optional injection
+
+ The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
+ would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
+ This explicitly permits the author of a template to treat some of the surrounding directives as optional.
+
+ ```
+ @Decorator({ selector: '[my-directive]' })
+ class MyDirective {
+ constructor(@Optional() dependency:Dependency) {
+ }
+ }
+ ```
+
+ This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
+ found, the injector supplies `null` instead of throwing an error.
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ constructor({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ lifecycle
+ }:{
+ selector:string,
+ properties:any,
+ events:List,
+ hostListeners: any,
+ lifecycle:List
+ }={})
+
+ :markdown
+
+
+
+
+
+ .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');
+ }
+ }
+ ```
+
+
+
+
+
+ .l-sub-section
+ h3 hasLifecycleHook
+
+
+ pre.prettyprint
+ code.
+ hasLifecycleHook(hook:string)
+
+ :markdown
+ Returns true if a directive participates in a given `LifecycleEvent`.
+
+ See onChange, onDestroy, onAllChangesDone for details.
+
+
+
+
+
+ .l-sub-section
+ h3 hostListeners
+
+
+ :markdown
+ Specifies which DOM hostListeners a directive listens to.
+
+ The `hostListeners` property defines 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({
+ hostListeners: {
+ 'event1': 'onMethod1(arguments)',
+ 'target:event2': 'onMethod2(arguments)',
+ ...
+ }
+ }
+ ```
+
+ ## Basic Event Binding:
+
+ Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
+ You would define the event binding as follows:
+
+ ```
+ @Decorator({
+ selector: 'input',
+ hostListeners: {
+ 'change': 'onChange($event)',
+ 'window:resize': 'onResize($event)'
+ }
+ })
+ class InputDecorator {
+ onChange(event:Event) {
+ }
+ onResize(event:Event) {
+ }
+ }
+ ```
+
+ Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
+
+
+
+
+
+ .l-sub-section
+ h3 lifecycle
+
+
+ :markdown
+ Specifies a set of lifecycle hostListeners in which the directive participates.
+
+ See onChange, onDestroy, onAllChangesDone for details.
+
+
+
+
+
+ .l-sub-section
+ h3 properties
+
+
+ :markdown
+ Enumerates the set of properties that accept data binding for a directive.
+
+ The `properties` property defines a set of `directiveProperty` to `bindingProperty`
+ key-value pairs:
+
+ - `directiveProperty` specifies the component property where the value is written.
+ - `bindingProperty` specifies the DOM property where the value is read from.
+
+ You can include a Pipe when specifying a `bindingProperty` to allow for data transformation and structural
+ change detection of the value. These pipes will be evaluated in the context of this component.
+
+
+ ## Syntax
+
+ ```
+ @Directive({
+ properties: {
+ 'directiveProperty1': 'bindingProperty1',
+ 'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
+ ...
+ }
+ }
+ ```
+
+
+ ## Basic Property Binding
+
+ 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:
+
+ ```
+ @Decorator({
+ selector: '[tooltip]',
+ properties: {
+ 'text': 'tooltip'
+ }
+ })
+ class Tooltip {
+ set text(text) {
+ // This will get called every time the 'tooltip' binding changes with the new value.
+ }
+ }
+ ```
+
+ 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
+ ...
+ ...
+ ```
+
+ 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 Pipe and keyValDiff documentation for more details.
+
+ ```
+ @Decorator({
+ 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
+
+ ```
+
+ In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
+
+
+
+
+
+ .l-sub-section
+ h3 selector
+
+
+ :markdown
+ The CSS selector that triggers the instantiation of a directive.
+
+ Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
+
+ `selector` may be declared as one of the following:
+
+ - `element-name`: select by element name.
+ - `.class`: select by class name.
+ - `[attribute]`: select by attribute name.
+ - `[attribute=value]`: select by attribute name and value.
+ - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
+ - `selector1, selector2`: select if either `selector1` or `selector2` matches.
+
+
+
+
+ Suppose we have a directive with an `input[type=text]` selector.
+
+ And the following HTML:
+
+ ```html
+