Rule: component-selector

Component selectors should follow given naming rules.

See more at https://angular.io/styleguide#style-02-07, https://angular.io/styleguide#style-05-02, and https://angular.io/styleguide#style-05-03.

Rationale
  • Consistent conventions make it easy to quickly identify and reference assets of different types.
  • Makes it easier to promote and share the component in other apps.
  • Components are easy to identify in the DOM.
  • Keeps the element names consistent with the specification for Custom Elements.
  • Components have templates containing HTML and optional Angular template syntax.
    • They display content. Developers place components on the page as they would native HTML elements and WebComponents.
  • It is easier to recognize that a symbol is a component by looking at the template’s HTML.
Notes:
TS Only

Config

Options accept three obligatory items as an array:

  1. "element" or "attribute" forces components either to be elements or attributes.
  2. A single prefix (string) or array of prefixes (strings) which have to be used in component selectors.
  3. "kebab-case" or "camelCase" allows you to pick a case.
Examples
"component-selector": ["element", "my-prefix", "kebab-case"]
"component-selector": ["element", ["ng", "ngx"], "kebab-case"]
"component-selector": ["attribute", "myPrefix", "camelCase"]
Schema
{
  "type": "array",
  "items": [
    {
      "enum": [
        "element",
        "attribute"
      ]
    },
    {
      "oneOf": [
        {
          "type": "array",
          "items": {
            "type": "string"
          }
        },
        {
          "type": "string"
        }
      ]
    },
    {
      "enum": [
        "kebab-case",
        "camelCase"
      ]
    }
  ],
  "minItems": 3,
  "maxItems": 3
}