I try to bind a value refreshed every second (Like a counter), but I have a really weird issue. When I start the timer, the value is not binding, but when I pause it, I can see the total value (If I pause after 9 seconds, the value is 9, for example).

More weird, when I restart the timer, the value is correctly binding.

But the problem is that I need to get this value binding at the start ...

• I've already try RxJS Interval, but it's worst on my case ...
• I've try to initiate the function in the DOM with NgInit directive, but it worst too (The counter start to count every 100 milliseconds) ...
• I've try to initiate the function on init in the component, stop it when the user start the counter to restart it just after, but I have the same issue than above ...

This is my actual component :

ngOnInit() {
    this.subscription = this.FunctionsService.getContent().subscribe(
      res => {
        this.audioUrl = res.url;
        this.getDuration(this.audioUrl);
        if(this.audioUrl){
          this.start(this.audioUrl);
        }
      }
    )
  }

  start(audioUrl){
    this.audio = new Pizzicato.Sound(audioUrl, () => {
      this.play();
    });
    setTimeout(()=>{
      this.isPlaying = true;
      this.ready = true;
    },1000)
  }
  
  play(){
    this.sound.play();
    this.startTimer();
    this.isPlaying = true;
  }

  pause(){
    this.isPlaying = false;
    this.pauseTimer();
    this.sound.pause();
  }

  getDuration(src:any) {
    var audio = new Audio(src);
    let self = this;
    audio.onloadedmetadata = function() {
      console.log(audio.duration);
    };
  }

  startTimer(){
    var self = this;
    this.timer = setInterval(()=>{
      self.currentTime++
      console.log(self.currentTime);
    },1000)
  }

  pauseTimer(){
    var self = this;
    clearInterval(self.timer);
  }

Did I miss something ? Thanks everyone for your help !