make the example lintable

gulpfile.js

@@ -670,7 +670,10 @@ gulp.task('lint', function() {
       '!./public/docs/_examples/**/node_modules/**/*',
       '!./public/docs/_examples/_protractor/**/*',
       '!./public/docs/_examples/**/typings/**/*',
-      '!./public/docs/_examples/**/typings-ng1/**/*'
+      '!./public/docs/_examples/**/typings-ng1/**/*',
+      // temporary until codelyzer is fixed mgechev/codelyzer#60
+      '!./public/docs/_examples/animations/ts/app/hero.service.ts'
+
     ])
     .pipe(tslint({
       rulesDirectory: ['node_modules/codelyzer'],

public/docs/_examples/animations/ts/app/hero-list-auto.component.ts

@@ -5,10 +5,9 @@ import {
   state,
   style,
   animate,
-  transition,
+  transition
-  group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -24,7 +23,7 @@ import { Hero, Heroes } from './hero.service';
   `,
   // #enddocregion template
   styleUrls: ['hero-list.component.css'],
-  
+
   /* When the element leaves (transition "in => void" occurs),
    * get the element's current computed height and animate
    * it down to 0.
@@ -42,5 +41,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListAutoComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-basic.component.ts

@@ -11,7 +11,7 @@ import {
   animate
 } from '@angular/core';
 // #enddocregion imports
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -64,5 +64,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListBasicComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-classes.component.ts

@@ -5,10 +5,9 @@ import {
   state,
   style,
   animate,
-  transition,
+  transition
-  group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -42,5 +41,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListClassesComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts

@@ -10,7 +10,7 @@ import {
  animate
 } from '@angular/core';
 // #enddocregion imports
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
  moduleId: module.id,
@@ -53,5 +53,5 @@ import { Hero, Heroes } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListCombinedTransitionsComponent {
- @Input() heroes:Heroes;
+ @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts

@@ -5,10 +5,9 @@ import {
   state,
   style,
   animate,
-  transition,
+  transition
-  group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -58,5 +57,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveStatesComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts

@@ -5,10 +5,9 @@ import {
   state,
   style,
   animate,
-  transition,
+  transition
-  group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -46,5 +45,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-groups.component.ts

@@ -8,7 +8,7 @@ import {
   transition,
   group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -74,5 +74,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListGroupsComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts

@@ -4,13 +4,12 @@ import {
  Component,
  Input,
  trigger,
- state,
  style,
  transition,
  animate
 } from '@angular/core';
 // #enddocregion imports
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
  moduleId: module.id,
@@ -55,5 +54,5 @@ import { Hero, Heroes } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListInlineStylesComponent {
- @Input() heroes:Heroes;
+ @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-keyframes.component.ts

@@ -1,3 +1,4 @@
+/* tslint:disable */
 import {
   Component,
   Input,
@@ -9,7 +10,7 @@ import {
   transition,
   group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -59,5 +60,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListKeyframesComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts

@@ -6,10 +6,9 @@ import {
   style,
   animate,
   transition,
-  group,
   keyframes
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -53,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListMultistepComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-timings.component.ts

@@ -5,10 +5,9 @@ import {
   state,
   style,
   animate,
-  transition,
+  transition
-  group
 } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -53,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListTimingsComponent {
-  @Input() heroes:Heroes;
+  @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts

@@ -10,7 +10,7 @@ import {
  animate
 } from '@angular/core';
 // #enddocregion imports
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
  moduleId: module.id,
@@ -52,5 +52,5 @@ import { Hero, Heroes } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListTwowayComponent {
- @Input() heroes:Heroes;
+ @Input() heroes: Heroes;
 }

public/docs/_examples/animations/ts/app/hero-team-builder.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Hero, Heroes } from './hero.service';
+import { Heroes } from './hero.service';
 import { HeroListBasicComponent } from './hero-list-basic.component';
 import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
 import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
@@ -52,7 +52,10 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
     <div class="columns">
       <div class="column">
         <h4>Enter & Leave & States</h4>
-        <p>Enter and leave animations combined with active/inactive state animations. Different enter and leave transitions depending on state.</p>
+        <p>
+          Enter and leave animations combined with active/inactive state animations.
+          Different enter and leave transitions depending on state.
+        </p>
         <hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
       </div>
       <div class="column">
@@ -82,7 +85,10 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
       </div-->
       <!--div class="column">
         <h4>CSS Keyframes</h4>
-        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce. Pull in the actual keyframes from CSS keyframes in component stylesheet.</p>
+        <p>
+          Enter and leave animations with three keyframes in each, to give the transition some bounce.
+          Pull in the actual keyframes from CSS keyframes in component stylesheet.
+        </p>
         <hero-list-multistep [heroes]=heroes></hero-list-multistep>
         <hero-list-keyframes [heroes]=heroes></hero-list-keyframes>
       </div-->
@@ -124,5 +130,5 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
   providers: [Heroes]
 })
 export class HeroTeamBuilderComponent {
-  constructor(private heroes:Heroes) { }
+  constructor(private heroes: Heroes) { }
 }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
-export class Hero {
+class Hero {
-  constructor(public name:string,
+  constructor(public name: string,
               public state = 'inactive') {
   }
 
@@ -10,6 +10,22 @@ export class Hero {
   }
 }
 
+let ALL_HEROES = [
+  'Wolverine',
+  'Magneto',
+  'Emma Frost',
+  'Thing',
+  'Kitty Pryde',
+  'Nightcrawler',
+  'Juggernaut',
+  'Beast',
+  'Captain America',
+  'Spider-Man',
+  'Puck',
+  'Alex Wilder',
+  'Doctor Strange'
+].map(name => new Hero(name));
+
 @Injectable()
 export class Heroes implements Iterable<Hero> {
 
@@ -36,19 +52,3 @@ export class Heroes implements Iterable<Hero> {
   }
 
 }
-
-var ALL_HEROES = [
-  'Wolverine',
-  'Magneto',
-  'Emma Frost',
-  'Thing',
-  'Kitty Pryde',
-  'Nightcrawler',
-  'Juggernaut',
-  'Beast',
-  'Captain America',
-  'Spider-Man',
-  'Puck',
-  'Alex Wilder',
-  'Doctor Strange'
-].map(name => new Hero(name));