component-selector.md

Pattern: Malformed component selector

Issue: -

Description

For details in the Angular styleguide see: prefixes, style and element selectors.

This rule has NO default options.

Options

The schema for the options of this rule is:

interface Options {
  type: 'attribute' | 'element' | Array<'attribute' | 'element'>;
  prefix: string | Array<string>;
  style: 'camelCase' | 'kebab-case' | Array<'camelCase' | 'kebab-case'>;
}

The Angular styleguide recommends setting type to element and style to kebab-case, as well as setting at least a prefix.

Examples

In the examples below, we will use the following configuration:

"rules": {
  "@angular-eslint/component-selector": [
    "warn",
    {
      "type": "element",
      "style": "kebab-case",
      "prefix": ["app", "toh"]
    }
  ]
}

Examples of incorrect code:

@Component({
  selector: '[app-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

@Component({
  selector: 'root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

@Component({
  selector: 'appRoot',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

@Component({
  selector: 'not-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

Examples of correct code:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

@Component({
  selector: 'toh-heroes',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

Further Reading

• GitHub - component-selector