Lint error: Implement lifecycle hook interfaces

Question

Hey everyone I got a linting error and I am not sure what it is talking about, this is the error: src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01) Row nr 4 is the @Component({ line

I have read the link it gives and I get what it tries to tell me ( atleast I think so :) ) but I can't see how it applies in this case.

Thanks for any assistance.

import { Component, ViewChild, ElementRef, HostListener} from '@angular/core';
import { Particle } from './particle';

@Component({
  selector: 'km-particles',
  styles: ['canvas { transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);}'],
  template: ` <canvas #canvas
              [attr.width]='width'
              [attr.height]='height'
              [style.opacity]='opacity'>
              </canvas>`
})
export class ParticlesComponent {

  private ctx: CanvasRenderingContext2D;
  private width: number;
  private height: number;
  private opacity: number;
  private particles: Particle[];
  private particleClearLoop: any;

  public playParticles: boolean;

  // 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();
  }

  createParticles() {
    this.particles = [];
    // let's make us some particles
    for (let i = 0; i < 150; i++) {
      this.particles.push(new Particle());
    }
  }

  draw() {
    // clear canvas
    this.ctx.clearRect(0, 0, this.width, this.height);

    // draw the particles
    this.particles.forEach((particle) => {

      particle.timestamp = Math.floor(Date.now());
      particle.counter = particle.sign * (particle.timestamp / particle.speed * Math.PI);

      this.ctx.beginPath();
      // define the circleparticle
      this.ctx.arc( particle.xPos + particle.radius * Math.cos(particle.counter / 100),
                    particle.yPos + particle.radius * Math.sin(particle.counter / 100),
                    particle.width,
                    0,
                    Math.PI * 2,
                    false);

      this.ctx.globalAlpha = particle.alpha;
      this.ctx.fillStyle = particle.color;
      this.ctx.fill();

    });

    if (this.playParticles) {
      requestAnimationFrame(this.draw.bind(this)); // AGAIN!
    }

  }

  // init resize and make the particles
  initAnim() {
    this.playParticles = false;
    this.opacity = 0; // so we don't see the flicker

    clearInterval(this.particleClearLoop);

    this.particleClearLoop = setTimeout(() => {
      this.opacity = 1;
      this.playParticles = true;
      this.resize();
      this.createParticles();
      this.draw();
    }, 500);
  }

  // method that resizes the canvas to the full width/height of the window
  resize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

Answer 1

you are using ngAfterViewInit Lifecycle Hook, you just need to add below to make TSLint happy,

export class ParticlesComponent implements AfterViewInit

Hope this helps!!