Search code examples
angularangular2-directivestslint

The conflict between angular directive selector and tslint

I am using angular 4 directive to define an angular attribute directive. But I want to use this directive as a class. My definition is (It works fine) :

@Directive({
  selector: '.input-field'
})

This is according to angular selector definition (the .class one)

enter image description here

But I got a tslint error as below:

tslint error

Is there any way to fix this error without disable the tslint rule?

Solution

  • I faced the same error and opened an issue on GitHub. This is the answer I got:

    While Angular does support class selectors for directives, this feature should be used only in special circumstances because it makes it hard to understand which parts of the template are regular classes and which are directives. This is why this syntax is tslint warning and not a compilation error.

    If you insist on using this selector style, you can change the tslint config, or prefix the callsite in the code with tslint ignore comment, but you'll make your life and other's life easier if you stick to attribute selectors instead.

    This is not very satisfying, but there seems no way around it.