@Directive

This is the documentation for Angular 6.
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 the sub_selector.
selector1, selector2: Select if either selector1 or selector2 matches.

Angular only allows directives to apply on CSS selectors that do not cross element boundaries.