65

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, but I can't see how it applies in this case.

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

@Component({
  selector: 'km-particles',
  template: ` <canvas #canvas
              [attr.width]='width'
              [attr.height]='height'
              [style.opacity]='opacity'>
              </canvas>`
})
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();
  }

  ...
}
Vega
  • 27,856
  • 27
  • 95
  • 103
Björn Hjorth
  • 2,459
  • 5
  • 25
  • 31

1 Answers1

148

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

export class ParticlesComponent implements AfterViewInit
starball
  • 20,030
  • 7
  • 43
  • 238
Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • 2
    Hey Madhu this helped, however I was wondering if you know why It needs it? It works fine without it. – L1ghtk3ira Sep 06 '18 at 14:45
  • 2
    One option might be to add `/* tslint:disable use-lifecycle-interface */`, just to gag TSLint. A better option is to follow Madhu Ranjan's advice: 1) `import { Component, OnInit } from '@angular/core';`, then 2) `export class MyComponent implements OnInit {...}`. The app should "work" in any case - it's just a TSLint warning. – paulsm4 Jan 16 '19 at 01:11