CODEWITHSUNDEEP
javascriptangularcountdowntimer
Madpop
Madpop

Reputation: 725

how to start and stop the count down timer using ngx-countdown using Angular

Scenario: Here i am looking for a count down timer where the user passes some seconds and user presses start or stop for this i am using ngx-countdown timer

requirements:

  1. user give some custom seconds for the timer (this already done).
  2. By default how can i display start button and when user press start button then only stop button has to be displayed.
  3. here how can i stop the timer when the given seconds are over i mean when user give 60 seconds then it should stop after that and display a alert and user can also stop the timer.

below is my code

  <countdown [config]="{leftTime: timeData}" (event)="handleEvent($event)"></countdown>
  `
})
export class AppComponent  {
  timeData = "120"
  constructor(){

  }

handleEvent(event){
  console.log(event)
}

below is my stackblitz url

https://stackblitz.com/edit/ngx-countdown-setup-bwdk4s?file=src/app/app.component.ts

Upvotes: 1

Views: 6349

Answers (2)

izik
izik

Reputation: 1043

You need to add @ViewChild('cd', { static: false }) private countdown: CountdownComponent;

Then add some buttons and bind the actions:

template:

<countdown #cd [config]="{leftTime: timeData}" (event)="handleEvent($event)"> 
</countdown>
<button (click)="pause()">pause</button>
<button (click)="start()">start</button>

functions:

pause(){
  this.countdown.pause();
}

start(){
  this.countdown.begin();
}

example: https://stackblitz.com/edit/ngx-countdown-setup-qo8kfq?file=src%2Fapp%2Fapp.component.ts

Edit:

add "notify" property to config:

[config]="{leftTime: timeData, notify: [ 2, 5 ]}"

then when the timer hit 5 & 2 notify event will be fired

handleEvent(event){
    if(event.action === 'notify'){
      console.log('Hi!');
    }
  }

example: https://stackblitz.com/edit/ngx-countdown-setup-qo8kfq?file=src%2Fapp%2Fapp.component.ts

Upvotes: 3

Sahan Thilakarathna
Sahan Thilakarathna

Reputation: 429

This may help you

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

@Component({
  selector: 'my-app',
  template: `
  <countdown [config]="config" (event)="handleEvent($event)"></countdown>
  <button (click)="start()">START</button>
  <button *ngIf="showStop" (click)="stop()">STOP</button>
  `
})
export class AppComponent  {
  timeData = "60"
  config:any;
  showStop:boolean;
  constructor(){

  }
    public ngOnInit() {
      this.config = {leftTime: this.timeData, demand:true};
  }
start(){
  this.config = {leftTime:this.timeData, demand:false};
  this.showStop=true;
}
stop(){
   this.config = {leftTime:this.timeData, demand:true};
   this.showStop=false;
}
handleEvent(event){
  console.log(event)
}
}

Upvotes: 1

Related Questions