build: disallow usage of HostBinding and HostListener (#6307)

Adds the `HostBinding` and `HostListener` decorators to the banned symbols list for consistency's sake. Refactors the handful of places that were using them.

Relates to #6304.

Author: crisbeto

src/lib/button-toggle/button-toggle.ts

@@ -13,7 +13,6 @@ import {
   ElementRef,
   Renderer2,
   EventEmitter,
-  HostBinding,
   Input,
   OnInit,
   OnDestroy,
@@ -264,7 +263,10 @@ export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple',
-    'class': 'mat-button-toggle'
+    '[class.mat-button-toggle-checked]': 'checked',
+    '[class.mat-button-toggle-disabled]': 'disabled',
+    'class': 'mat-button-toggle',
+    '[attr.id]': 'id',
   }
 })
 export class MdButtonToggle implements OnInit, OnDestroy {
@@ -311,21 +313,14 @@ export class MdButtonToggle implements OnInit, OnDestroy {
   }
 
   /** The unique ID for this button toggle. */
-  @HostBinding()
-  @Input()
-  id: string;
+  @Input() id: string;
 
   /** HTML's 'name' attribute used to group radios for unique selection. */
-  @Input()
-  name: string;
+  @Input() name: string;
 
   /** Whether the button is checked. */
-  @HostBinding('class.mat-button-toggle-checked')
   @Input()
-  get checked(): boolean {
-    return this._checked;
-  }
-
+  get checked(): boolean { return this._checked; }
   set checked(newCheckedState: boolean) {
     if (this._isSingleSelector && newCheckedState) {
       // Notify all button toggles with the same name (in the same group) to un-check.
@@ -356,7 +351,6 @@ export class MdButtonToggle implements OnInit, OnDestroy {
   }
 
   /** Whether the button is disabled. */
-  @HostBinding('class.mat-button-toggle-disabled')
   @Input()
   get disabled(): boolean {
     return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) ||

src/lib/progress-bar/progress-bar.ts

@@ -6,12 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Component,
-  ChangeDetectionStrategy,
-  HostBinding,
-  Input,
-} from '@angular/core';
+import {Component, ChangeDetectionStrategy, Input} from '@angular/core';
 
 // TODO(josephperrott): Benchpress tests.
 // TODO(josephperrott): Add ARIA attributes for progressbar "for".
@@ -27,6 +22,8 @@ import {
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    '[attr.aria-valuenow]': 'value',
+    '[attr.mode]': 'mode',
     '[class.mat-primary]': 'color == "primary"',
     '[class.mat-accent]': 'color == "accent"',
     '[class.mat-warn]': 'color == "warn"',
@@ -44,7 +41,6 @@ export class MdProgressBar {
 
   /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
-  @HostBinding('attr.aria-valuenow')
   get value() { return this._value; }
   set value(v: number) { this._value = clamp(v || 0); }
 
@@ -62,9 +58,7 @@ export class MdProgressBar {
    * 'determinate'.
    * Mirrored to mode attribute.
    */
-  @Input()
-  @HostBinding('attr.mode')
-  mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
+  @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
 
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {

src/lib/progress-spinner/progress-spinner.ts

@@ -8,7 +8,6 @@
 
 import {
   Component,
-  HostBinding,
   ChangeDetectionStrategy,
   OnDestroy,
   Input,
@@ -72,7 +71,9 @@ export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase, 'pr
   host: {
     'role': 'progressbar',
     '[attr.aria-valuemin]': '_ariaValueMin',
-    '[attr.aria-valuemax]': '_ariaValueMax'
+    '[attr.aria-valuemax]': '_ariaValueMax',
+    '[attr.aria-valuenow]': 'value',
+    '[attr.mode]': 'mode',
   },
   inputs: ['color'],
   templateUrl: 'progress-spinner.html',
@@ -132,7 +133,6 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
 
   /** Value of the progress circle. It is bound to the host as the attribute aria-valuenow. */
   @Input()
-  @HostBinding('attr.aria-valuenow')
   get value() {
     if (this.mode == 'determinate') {
       return this._value;
@@ -154,11 +154,8 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
    * Input must be one of the values from ProgressMode, defaults to 'determinate'.
    * mode is bound to the host as the attribute host.
    */
-  @HostBinding('attr.mode')
   @Input()
-  get mode() {
-    return this._mode;
-  }
+  get mode() { return this._mode; }
   set mode(mode: ProgressSpinnerMode) {
     if (mode !== this._mode) {
       if (mode === 'indeterminate') {

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -11,7 +11,6 @@ import {
   Component,
   Directive,
   ElementRef,
-  HostBinding,
   Inject,
   Input,
   NgZone,
@@ -153,6 +152,7 @@ export const _MdTabLinkMixinBase = mixinDisabled(MdTabLinkBase);
   host: {
     'class': 'mat-tab-link',
     '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.tabindex]': 'tabIndex',
     '[class.mat-tab-disabled]': 'disabled'
   }
 })
@@ -174,7 +174,6 @@ export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisa
   }
 
   /** @docs-private */
-  @HostBinding('tabIndex')
   get tabIndex(): number {
     return this.disabled ? -1 : 0;
   }

tslint.json

@@ -80,7 +80,15 @@
       "check-preblock"
     ],
     // Bans jasmine helper functions that will prevent the CI from properly running tests.
-    "ban": [true, ["fit"], ["fdescribe"], ["xit"], ["xdescribe"]],
+    "ban": [
+      true,
+      ["fit"],
+      ["fdescribe"],
+      ["xit"],
+      ["xdescribe"],
+      { "name": "HostBinding", "message": "Use `host` in the component definition instead." },
+      { "name": "HostListener", "message": "Use `host` in the component definition instead." }
+    ],
     // Disallows importing the whole RxJS library. Submodules can be still imported.
     "import-blacklist": [true, "rxjs"],
     // Avoids inconsistent linebreak styles in source files. Forces developers to use LF linebreaks.