Timer using service not getting called in Angular-CodePudding

I have created a service file in angular for timer

  import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class TimerUtilService {
    
      initial_module_timer_value = 300;
      second_left:any;
      module_finish_interval;
      time_limit_over:any=false;
    
      constructor() { }
      start_countdown()
      { 
        this.startTimer(this.initial_module_timer_value);
      }
      startTimer(duration) {
        var timer = duration, minutes, seconds;
        var self = this;
        this.module_finish_interval= setInterval(() => { 
          minutes = (timer / 60) | 0;
          seconds = (timer % 60) | 0;
          if(timer>=0)
          {
          minutes = minutes < 10 ? "0"   minutes : minutes;
          seconds = seconds < 10 ? "0"   seconds : seconds;
          this.second_left = minutes   ":"   seconds;
        
          }
     if(--timer < 0)
    {
    console.log('completed');
    }
          },1000);
      }
      end_countdown()
      {  
      clearInterval(this.module_finish_interval);
      }
    }

In my component i want to call this service

import { TimerUtilService } from '../../../shared/timer-util.service';

export class TestComponent implements OnInit {
constructor(private route: ActivatedRoute,private elem: ElementRef,private router: Router,private http: HttpClient,private timerService : TimerUtilService) {
    this.timerService.start_countdown();
    console.log(this.timerService.second_left);
}

Getting null value in console.

I want to show timer in my component like if 05:00 minutes then this timer should decrease every second in the component called in which it is called till time left is 00:00 seconds.

Thanks

CodePudding user response：

You might want to consider putting the functions you want to init in to ngOnInit() function like so

ngOnInit(): void {
 this.timerService.start_countdown();
}

Try this in side your startTimer() function,

var timer = duration, minutes, seconds;
var x = setInterval(() => { 
    minutes = (timer / 60) | 0;
    seconds = (timer % 60) | 0;
    if(timer>=0){
        timer=timer-1
        minutes = minutes < 10 ? "0"   minutes : minutes;
        seconds = seconds < 10 ? "0"   seconds : seconds;
        var second_left = minutes   ":"   seconds;

        console.log(second_left);

        if(timer==0){
            console.log("cleared");
            clearInterval(x)
        }
    }
},1000)

As the constructor only call once , you will only have one 00:00 seconds console log.

CodePudding user response：

You're getting a null result because the second_left variable is still undefined while invoking the console.log(this.timerService.second_left); .

Try putting a console.log in the service function and see what is happening behind the scenes like:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TimerUtilService {

  initial_module_timer_value = 300;
  second_left:any;
  module_finish_interval;
  time_limit_over:any=false;

  constructor() { }
  start_countdown()
  { 
    this.startTimer(this.initial_module_timer_value);
  }
  startTimer(duration) {
    var timer = duration, minutes, seconds;
    var self = this;
    this.module_finish_interval= setInterval(() => { 

      //##################
      // Logging timer and seconds at every interval
      //#################
      console.log("Timer: "   timer);
      console.log("Seconds left: "   second_left);        

      minutes = (timer / 60) | 0;
      seconds = (timer % 60) | 0;
      if(timer>=0)
      {
      minutes = minutes < 10 ? "0"   minutes : minutes;
      seconds = seconds < 10 ? "0"   seconds : seconds;
      this.second_left = minutes   ":"   seconds;
      if(timer==0)
      {
        console.log('completed');
      }  
      }
      },1000);
  }
  end_countdown()
  {  
  clearInterval(this.module_finish_interval);
  }
}