Angular @Directive Naming

ID

javascript.angular_naming_directive

Severity

info

Remediation Complexity

trivial

Remediation Risk

medium

Remediation Effort

low

Resource

Naming Convention

Language

JavaScript

Tags

angular, framework, naming

Description

Reports an Angular @Directive class whose name does not end in Directive, or whose selector is not a single bracketed attribute selector with a lowerCamelCase identifier:

// Bad — class missing Directive suffix.
@Directive({ selector: "[appHighlight]" })
export class Highlight { }                      // FLAW

// Bad — selector is an element form, not [attribute].
@Directive({ selector: "highlight" })
export class HighlightDirective { }             // FLAW

// Good
@Directive({ selector: "[appHighlight]" })
export class HighlightDirective { }

Rationale

Angular allows multiple selector forms (element, attribute, class, …​), but the official style guide restricts directives to the attribute form so they don’t visually clash with components (which use element selectors). The bracketed [prefixXxx] form, with a project-specific prefix, also avoids name collisions across libraries.

The class suffix Directive makes directive classes easy to recognise in TypeScript imports.

Remediation

Rename the class and switch to the attribute selector:

@Directive({ selector: "[appHighlight]" })
export class HighlightDirective { ... }

Notes

The rule fires only when the selector is a literal string. Selectors composed at runtime (template strings, imported constants) are not statically checkable. Multi-target selectors (comma-separated lists, pseudo-classes) are also out of scope for v1 — the rule reports a violation only when the selector is clearly a single, non-bracketed string.

References