Lint error: Implement lifecycle hook interfaces
<p>I got a linting error and I am not sure what it is talking about, this is the error:</p>
<blockquote>
<p>src/app/particles/particles.component.ts[4, 1]: Implement lifecycle
hook interfaces
(<a href="https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01</a>)</p>
</blockquote>
<p>Row nr 4 is the <code>@Component({</code> line</p>
<p>I have read the link it gives and I get what it tries to tell me,  but I can't see how it applies in this case.</p>
<pre><code>import { Component, ViewChild, ElementRef, HostListener} from '@angular/core';
import { Particle } from './particle';

@Component({
  selector: 'km-particles',
  template: ` &lt;canvas #canvas
              [attr.width]='width'
              [attr.height]='height'
              [style.opacity]='opacity'&gt;
              &lt;/canvas&gt;`
})
export class ParticlesComponent {

  ...
  // get the element with the #canvas on it
  @ViewChild('canvas') canvas: ElementRef;

  // on window resize, restart the animation with the new boundaries
  @HostListener('window:resize', ['$event'])
  OnResize(event: Event) {
    this.initAnim();
  }

  constructor() {
    this.opacity = 0;
  }

  // wait for the view to init before using the element
  ngAfterViewInit() {
    this.ctx = this.canvas.nativeElement.getContext('2d');

    // ok all is ready, start the particle animation
    this.initAnim();
  }

  ...
}
</code></pre>