chore: tslint sweep done

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -24,13 +24,13 @@ export class HeroesComponent { ... }
 */
 // #docregion class
 export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
 // #docregion ctor
   constructor(private service: HeroService) { }
 // #enddocregion ctor
 
-  heroes: Hero[];
-  selectedHero: Hero;
-
   ngOnInit() {
     this.heroes = this.service.getHeroes();
   }

public/docs/_examples/architecture/ts/app/hero.service.ts

@@ -7,14 +7,14 @@ import { Logger } from './logger.service';
 @Injectable()
 // #docregion class
 export class HeroService {
+  private heroes: Hero[] = [];
+
   // #docregion ctor
   constructor(
     private backend: BackendService,
     private logger: Logger) { }
   // #enddocregion ctor
 
-  private heroes: Hero[] = [];
-
   getHeroes() {
     this.backend.getAll(Hero).then( (heroes: Hero[]) => {
       this.logger.log(`Fetched ${heroes.length} heroes.`);

public/docs/_examples/architecture/ts/app/sales-tax.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { TaxRateService } from './tax-rate.service';
 

public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:no-unused-variable */
 // #docregion
 import { Directive, ElementRef, Input } from '@angular/core';
 

public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

@@ -1,14 +1,10 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
 // #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]',
-  // #docregion host
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
-  // #enddocregion host
+  selector: '[myHighlight]'
 })
 
 export class HighlightDirective {
@@ -18,9 +14,19 @@ export class HighlightDirective {
   constructor(el: ElementRef) { this.el = el.nativeElement; }
   // #enddocregion ctor
 
-  // #docregion mouse-methods
-  onMouseEnter() { this.highlight('yellow'); }
-  onMouseLeave() { this.highlight(null); }
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter') onMouseEnter() {
+    // #enddocregion host
+    this.highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    // #enddocregion host
+    this.highlight(null);
+    // #docregion host
+  }
+  // #enddocregion host
 
   private highlight(color: string) {
     this.el.style.backgroundColor = color;

public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

@@ -1,13 +1,9 @@
 // #docplaster
 // #docregion full
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]',
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
+  selector: '[myHighlight]'
 })
 // #docregion class-1
 export class HighlightDirective {
@@ -29,9 +25,13 @@ export class HighlightDirective {
   // #enddocregion color
 
   // #docregion mouse-enter
-  onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this._defaultColor);
+  }
   // #enddocregion mouse-enter
-  onMouseLeave() { this.highlight(null); }
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
 
   private highlight(color: string) {
     this.el.style.backgroundColor = color;

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts

@@ -1,10 +1,10 @@
-import { Injectable, Pipe } from '@angular/core';
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
 import { DatePipe } from '@angular/common';
 
 @Injectable()
 // #docregion date-pipe
 @Pipe({name: 'date', pure: true})
-export class StringSafeDatePipe extends DatePipe {
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
  transform(value: any, format: string): string {
    value = typeof value === 'string' ?
            Date.parse(value) : value;

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:no-unused-variable */
 // #docplaster
 // #docregion import
 import { Component } from '@angular/core';

public/docs/_examples/cb-component-communication/ts/app/app.component.ts

@@ -25,7 +25,7 @@ if (!/e2e/.test(location.search)) {
 }
 
 @Component({
-  selector: 'app',
+  selector: 'my-app',
   templateUrl: 'app/app.component.html',
   directives: directives
 })

public/docs/_examples/cb-component-communication/ts/index.html

@@ -23,7 +23,7 @@
   </head>
 
   <body>
-    <app>loading...</app>
+    <my-app>loading...</my-app>
   </body>
 
 </html>

public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component, Input, OnInit } from '@angular/core';
 
-import { Hero }                     from './hero';
 import { HeroCacheService }         from './hero-cache.service';
 
 // #docregion component
@@ -17,7 +16,6 @@ import { HeroCacheService }         from './hero-cache.service';
 })
 
 export class HeroBioComponent implements OnInit  {
-
   @Input() heroId: number;
 
   constructor(private heroCache: HeroCacheService) { }

public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component}             from '@angular/core';
+import { Component }             from '@angular/core';
 
 import { HeroContactComponent } from './hero-contact.component';
 import { HeroBioComponent }     from './hero-bio.component';

public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
+import { Component, Host, Optional } from '@angular/core';
 
 import { HeroCacheService } from './hero-cache.service';
 import { LoggerService }    from './logger.service';

public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts

@@ -1,13 +1,9 @@
 // #docplaster
 // #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]',
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
+  selector: '[myHighlight]'
 })
 export class HighlightDirective {
 
@@ -19,8 +15,13 @@ export class HighlightDirective {
     this.el = el.nativeElement;
   }
 
-  onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
-  onMouseLeave() { this.highlight(null); }
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'cyan');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
 
   private highlight(color: string) {
     this.el.style.backgroundColor = color;

public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts

@@ -1,5 +1,5 @@
-/* tslint:disable:no-unused-variable */
-/* tslint:disable:one-line:check-open-brace*/
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, provide, SkipSelf } from '@angular/core';
@@ -23,7 +23,7 @@ const provideParent =
 // #enddocregion provide-parent, provide-the-parent
 // #docregion provide-parent
   (component: any, parentType?: any) => {
-    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
+    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
   };
 // #enddocregion provide-parent
 

public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component }       from '@angular/core';
 
-import { DynamicForm }     from './dynamic-form.component';
+import { DynamicFormComponent }     from './dynamic-form.component';
 import { QuestionService } from './question.service';
 
 @Component({
@@ -12,7 +12,7 @@ import { QuestionService } from './question.service';
       <dynamic-form [questions]="questions"></dynamic-form>
     </div>
   `,
-  directives: [DynamicForm],
+  directives: [DynamicFormComponent],
   providers:  [QuestionService]
 })
 export class AppComponent {

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts

@@ -12,7 +12,7 @@ import { DynamicFormQuestionComponent } from './dynamic-form-question.component'
   directives: [DynamicFormQuestionComponent],
   providers:  [QuestionControlService]
 })
-export class DynamicForm {
+export class DynamicFormComponent implements OnInit {
 
   @Input() questions: QuestionBase<any>[] = [];
   form: ControlGroup;

public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable }   from '@angular/core';
-import { ControlGroup, FormBuilder, Validators } from '@angular/common';
+import { FormBuilder, Validators } from '@angular/common';
 import { QuestionBase } from './question-base';
 
 @Injectable()

public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts

@@ -2,7 +2,6 @@
 import { Injectable }       from '@angular/core';
 
 import { QuestionBase }     from './question-base';
-import { DynamicForm }      from './dynamic-form.component';
 import { TextboxQuestion }  from './question-textbox';
 import { DropdownQuestion } from './question-dropdown';
 

public/docs/_examples/cb-ts-to-js/e2e-spec.ts

@@ -59,7 +59,7 @@ describe('TypeScript to Javascript tests', function () {
 
   it('should support content and view queries', function() {
     let app = element(by.css('heroes-queries'));
-    let windstorm = app.element(by.css('hero:first-child'));
+    let windstorm = app.element(by.css('a-hero:first-child'));
 
     app.element(by.buttonText('Activate')).click();
     expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');

public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js

@@ -15,7 +15,7 @@
 
   // #docregion content
   var HeroComponent = ng.core.Component({
-    selector: 'hero',
+    selector: 'a-hero',
     template: '<h2 [class.active]=active>' +
       '{{hero.name}} ' +
       '<ng-content></ng-content>' +
@@ -38,10 +38,10 @@
   var AppComponent = ng.core.Component({
     selector: 'heroes-queries',
     template:
-      '<hero *ngFor="let hero of heroData"' +
+      '<a-hero *ngFor="let hero of heroData"' +
             '[hero]="hero">' +
         '<active-label></active-label>' +
-      '</hero>' +
+      '</a-hero>' +
       '<button (click)="activate()">' +
         'Activate' +
       '</button>',

public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts

@@ -23,7 +23,7 @@ class ActiveLabelComponent {
 
 // #docregion content
 @Component({
-  selector: 'hero',
+  selector: 'a-hero',
   template: `<h2 [class.active]=active>
     {{hero.name}}
     <ng-content></ng-content>
@@ -48,10 +48,10 @@ class HeroComponent {
 @Component({
   selector: 'heroes-queries',
   template: `
-    <hero *ngFor="let hero of heroData"
+    <a-hero *ngFor="let hero of heroData"
           [hero]="hero">
       <active-label></active-label>
-    </hero>
+    </a-hero>
     <button (click)="activate()">
       Activate
     </button>

public/docs/_examples/cb-ts-to-js/ts/app/main.ts

@@ -1,3 +1,4 @@
+/* tslint:disable no-unused-variable */
 // #docregion ng2import
 import { bootstrap }
   from '@angular/platform-browser-dynamic';

public/docs/_examples/cli-quickstart/e2e-spec.ts

@@ -2,10 +2,10 @@
 describe('cli-quickstart App', () => {
   beforeEach(() => {
     return browser.get('/');
-  })
+  });
 
   it('should display message saying app works', () => {
-    var pageTitle = element(by.css('cli-quickstart-app h1')).getText()
+    let pageTitle = element(by.css('cli-quickstart-app h1')).getText();
     expect(pageTitle).toEqual('My First Angular 2 App');
   });
 });

public/docs/_examples/dependency-injection/ts/app/app.component.ts

@@ -10,7 +10,7 @@ import { APP_CONFIG, AppConfig,
          HERO_DI_CONFIG }    from './app.config';
 import { Logger }            from './logger.service';
 
-import { User, UserService } from './user.service';
+import { UserService } from './user.service';
 // #enddocregion imports
 import { InjectorComponent } from './injector.component';
 import { TestComponent }     from './test.component';

public/docs/_examples/dependency-injection/ts/app/car/car.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { Car, Engine, Tires }  from './car';
 import { Car as CarNoDi }      from './car-no-di';
@@ -27,12 +27,12 @@ import { useInjector }        from './car-injector';
   providers: [Car, Engine, Tires]
 })
 export class CarComponent {
-  constructor(public car: Car) {}
-
   factoryCar  = (new CarFactory).createCar();
   injectorCar = useInjector();
   noDiCar     = new CarNoDi;
   simpleCar   = simpleCar();
   superCar    = superCar();
   testCar     = testCar();
+
+  constructor(public car: Car) {}
 }

public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 
 @Injectable()

public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';