Directive
decorator
Decorator that marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM.
Option | Description |
---|---|
selector |
The CSS selector that identifies this directive in a template and triggers instantiation of the directive. |
inputs |
Enumerates the set of data-bound input properties for a directive |
outputs |
Enumerates the set of event-bound output properties. |
providers |
Configures the injector of this directive or component with a token that maps to a provider of a dependency. |
exportAs |
Defines the name that can be used in the template to assign this directive to a variable. |
queries |
Configures the queries that will be injected into the directive. |
host |
Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs. |
jit |
If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT. |
Subclasses
Description
The options provide configuration metadata that determines how the directive should be processed, instantiated and used at runtime.
Directive classes, like component classes, can implement life-cycle hooks to influence their configuration and behavior.
Options
selector |
---|
The CSS selector that identifies this directive in a template and triggers instantiation of the directive. |
|
Declare as one of the following:
Angular only allows directives to apply on CSS selectors that do not cross element boundaries. For the following template HTML, a directive with an <form>
<input type="text">
<input type="radio">
<form> |
inputs |
---|
Enumerates the set of data-bound input properties for a directive |
|
Angular automatically updates input properties during change detection. The
When The following example creates a component with two data-bound properties. @Component({
selector: 'bank-account',
inputs: ['bankName', 'id: account-id'],
template: `
Bank Name: {{bankName}}
Account Id: {{id}}
`
})
class BankAccount {
bankName: string;
id: string;
} |
outputs |
---|
Enumerates the set of event-bound output properties. |
|
When an output property emits an event, an event handler attached to that event in the template is invoked. The
@Component({
selector: 'child-dir',
outputs: [ 'bankNameChange' ]
template: `<input (input)="bankNameChange.emit($event.target.value)" />`
})
class ChildDir {
bankNameChange: EventEmitter<string> = new EventEmitter<string>();
}
@Component({
selector: 'main',
template: `
{{ bankName }} <child-dir (bankNameChange)="onBankNameChange($event)"></child-dir>
`
})
class MainComponent {
bankName: string;
onBankNameChange(bankName: string) {
this.bankName = bankName;
}
} |
providers |
---|
Configures the injector of this directive or component with a token that maps to a provider of a dependency. |
|
exportAs |
---|
Defines the name that can be used in the template to assign this directive to a variable. |
|
@Directive({
selector: 'child-dir',
exportAs: 'child'
})
class ChildDir {
}
@Component({
selector: 'main',
template: `<child-dir #c="child"></child-dir>`
})
class MainComponent {
} |
queries |
---|
Configures the queries that will be injected into the directive. |
|
Content queries are set before the The following example shows how queries are defined and when their results are available in lifecycle hooks: @Component({
selector: 'someDir',
queries: {
contentChildren: new ContentChildren(ChildDirective),
viewChildren: new ViewChildren(ChildDirective)
},
template: '<child-directive></child-directive>'
})
class SomeDir {
contentChildren: QueryList<ChildDirective>,
viewChildren: QueryList<ChildDirective>
ngAfterContentInit() {
// contentChildren is set
}
ngAfterViewInit() {
// viewChildren is set
}
} |
host |
---|
Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs. |
|
Angular automatically checks host property bindings during change detection. If a binding changes, Angular updates the directive's host element. When the key is a property of the host element, the property value is the propagated to the specified DOM property. When the key is a static attribute in the DOM, the attribute value is propagated to the specified property in the host element. For event handling:
|
jit |
---|
If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT. |
|
This exists to support future Ivy work and has no effect currently. |
Usage notes
To define a directive, mark the class with the decorator and provide metadata.
import {Directive} from '@angular/core';
@Directive({
selector: 'my-directive',
})
export class MyDirective {
...
}
Declaring directives
Directives are declarables. They must be declared by an NgModule in order to be usable in an app.
A directive must belong to exactly one NgModule. Do not re-declare a directive imported from another module. List the directive class in the declarations
field of an NgModule.
declarations: [
AppComponent,
MyDirective
],
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/core/Directive