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