CODEWITHSUNDEEP
javascriptangulartypescriptfunction
Durlabh Sharma
Durlabh Sharma

Reputation: 407

TS2349: This expression is not callable. Type 'void' has no call signatures

I'm new to angular and TS. Trying to create a component to use setInterval method. Here is my TS Component

import { Component, OnInit, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-gamecontrol',
  templateUrl: './gamecontrol.component.html',
  styleUrls: ['./gamecontrol.component.css']
})
export class GamecontrolComponent implements OnInit {

  constructor() { }
  counterEmitter = new EventEmitter<number>();
  counter = 0;

  initiateGame = setInterval(() => {
    this.counter++;
    this.counterEmitter.emit(this.counter);
    console.log(this.counter);
  }, 1000);

  stopGame = clearInterval(this.initiateGame);

  ngOnInit(): void {
  }
}

And here is the HTML component calling it :

<h3>Welcome to the game of Chances</h3>
<div class="container">
    <div class="row">
        <button class="btn btn-primary" (click)="initiateGame()">Start Game</button>
    </div>
    <div class="row">
        <button class="btn btn-primary" (click)="stopGame()">Stop Game</button>
    </div>
</div>

When I try to run the application, I get below errors :

RROR in src/app/gamecontrol/gamecontrol.component.html:4:50 - error TS2349: This expression is not callable.
      Type 'Number' has no call signatures.
    
    4         <button class="btn btn-primary" (click)="initiateGame()">Start Game</button>
                                                       ~~~~~~~~~~~~
    
      src/app/gamecontrol/gamecontrol.component.ts:5:16
        5   templateUrl: './gamecontrol.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component GamecontrolComponent.
    src/app/gamecontrol/gamecontrol.component.html:7:50 - error TS2349: This expression is not callable.
      Type 'void' has no call signatures.
    
    7         <button class="btn btn-primary" (click)="stopGame()">Stop Game</button>
                                                       ~~~~~~~~
    
      src/app/gamecontrol/gamecontrol.component.ts:5:16
        5   templateUrl: './gamecontrol.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component GamecontrolComponent.

Also when I declare my function like shown below, it doesn't give any error and works fine. What is the difference in both approaches?

initiateGame() {
  setInterval(() => {
    this.counter++;
    this.counterEmitter.emit(this.counter);
    console.log(this.counter);
  }, 1000);
}

What exactly am I doing wrong here? Also I don't only need the working code. I need to understand why this is a problem. I tried to read few other questions with similar query, but I didn't clearly understand the issue there.

Upvotes: 1

Views: 8842

Answers (1)

Durlabh Sharma
Durlabh Sharma

Reputation: 407

As pointed out by @harmandeepsinghkalsi in comments, problem was with the way setInterval is called and not Angular/TS specific issue. I was able to get past this with a minor tweak to my code. Answering this just to close the question and to keep future stackers updated with the answer.

This is the new modified code :

@Output() counterEmitter = new EventEmitter<number>();
  counter = 0;
  intervalId: any;

  initiateGame() {
    this.intervalId = setInterval(() => {
      this.counter++;
      this.counterEmitter.emit(this.counter);
      console.log(this.counter);
    }, 1000);
  }

  stopGame() {
    clearInterval(this.intervalId);
  }
  ngOnInit(): void {
  }

Upvotes: 2

Related Questions