@Directive
This is the documentation for Angular 6.
You can switch to the latest version Angular 10.
You can switch to the latest version Angular 10.
You can define your own directives to attach custom behavior to elements in the DOM.
In the following example we create a directive that extends a button to show an alert on click.
Source
<button clickAlert>Click me</button>
@Directive({
selector: 'button[clickAlert]',
})
export class ClickAlertDirective {
@HostListener('click') clickHandler() {
alert('Clicked');
}
}
Result
Selector
The selector
property of @Directive
declaration identifies this directive in a template and triggers instantiation of the directive.
Declare 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 thesub_selector
.selector1, selector2
: Select if eitherselector1
orselector2
matches.
Angular only allows directives to apply on CSS selectors that do not cross element boundaries.