`@Directive`

Declares a class as a directive that adds behavior to elements.

Since Angular 2+ Spec ↗

Syntax

@Directive(config: DirectiveMetadata)

Parameters

Name	Type	Required	Description
`config`	`DirectiveMetadata`	No	Metadata such as selector, host, providers, exportAs.

Returns

ClassDecorator — Decorator attaching directive metadata to the class.

Examples

import { Directive, ElementRef, inject, HostListener } from '@angular/core';

@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  private el = inject(ElementRef);
  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.background = 'yellow';
  }
}

Notes

Use attribute selectors like `[appHighlight]` for behavioral directives. Directives are standalone by default in modern Angular and can be added to a component's `imports`. Combine with host bindings/listeners or signal inputs.