StyleGuide - In Directives and Components, "Use @HostListener..."

[mgechev]

To be discussed.

// cc @johnpapa @wardbell

---

• Use @HostListener and @HostBinding instead of the host property of the @Directive and @Component decorators:

  Why?: The name of the property, or method name associated to @HostBinding or respectively @HostListener should be modified only in a single place - in the directive's controller. In contrast if you use host you need to modify both the property declaration inside the controller, and the metadata associated to the directive.

  Why?: The metadata declaration attached to the directive is shorter and thus more readable.

  /* AVOID */
  @Directive({
    selector: '[sgSample]',
    host: {
      '(mouseenter)': 'onMouseEnter()',
      'attr.role': 'button'
    }
  })
  class SampleDirective {
    role = 'button';
    onMouseEnter() {...}
  }

  /* RECOMMENDED */
  @Directive({
    selector: '[sgSample]'
  })
  class SampleDirective {
    @HostBinding('attr.role') role = 'button';
    @HostListener('mouseenter') onMouseEnter() {...}
  }

[johnpapa]

Agreed on this one. Which section do you think we should add it to? Component?

@mgechev

[mgechev]

It is valid for both Components and Directives, so I'd say to the Directives section.

[johnpapa]

added

[mgechev]

Awesome! Closing the issue.