index.html

---
description: Component selectors should follow given naming rules.
descriptionDetails: |-

  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.
      
optionExamples:
  - '[true, "element", "my-prefix", "kebab-case"]'
  - '[true, "element", ["ng", "ngx"], "kebab-case"]'
  - '[true, "attribute", "myPrefix", "camelCase"]'
  - '[true, ["element", "attribute"], "myPrefix", "camelCase"]'
options:
  items:
    - enum:
        - attribute
        - element
    - oneOf:
        - items:
            type: string
          type: array
        - type: string
    - enum:
        - camelCase
        - kebab-case
  maxLength: 3
  minLength: 3
  type: array
optionsDescription: |-

  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.
      
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.
      
ruleName: component-selector
type: style
typescriptOnly: true
layout: rule
title: 'Rule: component-selector'
optionsJSON: |-
  {
    "items": [
      {
        "enum": [
          "attribute",
          "element"
        ]
      },
      {
        "oneOf": [
          {
            "items": {
              "type": "string"
            },
            "type": "array"
          },
          {
            "type": "string"
          }
        ]
      },
      {
        "enum": [
          "camelCase",
          "kebab-case"
        ]
      }
    ],
    "maxLength": 3,
    "minLength": 3,
    "type": "array"
  }
---