Rule: component-selector

Component selectors should follow given naming rules.

See more at https://angular.io/guide/styleguide#style-02-07, https://angular.io/guide/styleguide#style-05-02 and https://angular.io/guide/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 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 component selectors.
  3. kebab-case or camelCase allows you to pick a case.
Examples
"component-selector": [true, "element", "my-prefix", "kebab-case"]

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

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

"component-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"
}