Angular - Using a component selector as an attribute makes tslint get angry

Question

I'm trying to create a component with an attribute as a selector, like this:

@Component({
    selector: '[my-attribute-selector]',
    template: ``
})
export class MyComponent { 
   // Some cool stuff
}

However, tslint is complaining about that, with the following message:

[tslint] The selector of the component "MyComponent" should be used as element

I know I could just disable that tslint rule, but I'd like to know if there's a reasonable reason why I shouldn't use an attribute as the component's selector before doing so.

Thanks in advance!

Answer 1

To allow linting for both element and attribute selectors, in tslint.config pass in an array ["element", "attribute"] instead of "element" or just "attribute":

"component-selector": [
        true,
        ["element", "attribute"],
        "app",
        "kebab-case"
    ]

As per reasons of taking the attribute approach, I will quote from this issue on codelyzer. Basically it's advisable when intending to just wrap low-level native input functionality like button or input without having to put a <my-custom-input> around them.

After listening to Angular Material team's talk in ng-conf about component API designs there is a case for using attribute selectors as components to allow components to be able to use the DOM API without needing to reflect 20+ bindings from the custom element style components to the inner DOM API it wraps.

Answer 2

Your tslint.config file will be having this rule

"component-selector": [
  "element",
  "app",
  "kebab-case"
],

Please modify that to allow attribute selector as below

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