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
Component
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. |
selector: string |
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
|
inputs |
---|
Enumerates the set of data-bound input properties for a directive |
inputs: string[] |
Angular automatically updates input properties during change detection. The
When The following example creates a component with two data-bound properties.
|
outputs |
---|
Enumerates the set of event-bound output properties. |
outputs: string[] |
When an output property emits an event, an event handler attached to that event in the template is invoked. The
|
providers |
---|
Configures the injector of this directive or component with a token that maps to a provider of a dependency. |
providers: Provider[] |
exportAs |
---|
Defines the name that can be used in the template to assign this directive to a variable. |
exportAs: string |
|
queries |
---|
Configures the queries that will be injected into the directive. |
=== queries: { [key: string]: any; } === |
Content queries are set before the The following example shows how queries are defined and when their results are available in lifecycle hooks:
|
host |
---|
Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs. |
=== host: { [key: string]: string; } === |
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. |
jit: true |
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