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!!