Rule: directive-selector

Directive selectors should follow given naming rules.

See more at https://angular.io/guide/styleguide#style-02-06 and https://angular.io/guide/styleguide#style-02-08

Rationale
  • Consistent conventions make it easy to quickly identify and reference assets of different types.
  • Makes it easier to promote and share the directive in other apps.
  • Directives are easy to identify in the DOM.
  • Keeps the element names consistent with the specification for Custom Elements.
  • It is easier to recognize that a symbol is a directive by looking at the template’s HTML.
Notes:
TS Only

Config

Options accept three obligatory items as an array:

  1. element or attribute forces directives to be used as either elements, attributes, or both (not recommended)
  2. A single prefix (string) or array of prefixes (strings) which have to be used in directive selectors.
  3. kebab-case or camelCase allows you to pick a case.
Examples
"directive-selector": [true, "element", "my-prefix", "kebab-case"]

"directive-selector": [true, "element", ["ng", "ngx"], "kebab-case"]

"directive-selector": [true, "attribute", "myPrefix", "camelCase"]

"directive-selector": [true, ["element", "attribute"], "myPrefix", "camelCase"]
Schema
{
  "items": [
    {
      "enum": [
        "attribute",
        "element"
      ]
    },
    {
      "oneOf": [
        {
          "items": {
            "type": "string"
          },
          "type": "array"
        },
        {
          "type": "string"
        }
      ]
    },
    {
      "enum": [
        "camelCase",
        "kebab-case"
      ]
    }
  ],
  "maxLength": 3,
  "minLength": 3,
  "type": "array"
}