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? |
When present, this directive/component is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import |
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.
Further information is available in the Usage Notes...
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 |
---|
When present, this directive/component is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import |
|
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 { ... }
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–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/Directive