@Directive
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.