Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samuelrvg/1e12950960c830f7917a06513fa92116 to your computer and use it in GitHub Desktop.
Save samuelrvg/1e12950960c830f7917a06513fa92116 to your computer and use it in GitHub Desktop.
<div class="row" style="margin-bottom: 12px;">
<div class="col-md-12" style="text-align: center;">
This page will refresh in <div class="time">{{minutes}}</div> Min <div class="time">{{seconds}}</div> Sec
</div>
</div>
.time {
background-color: #FC5B2D;
color: white;
width: 25px;
height: 20px;
display: inline-block;
border-radius: 5px;
}
import { Component, OnInit, Output, Input, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { Subscription, Observable, timer } from 'rxjs';
import * as moment from 'moment';
@Component({
selector: 'kt-auto-refresh',
templateUrl: './auto-refresh.component.html',
styleUrls: ['./auto-refresh.component.scss']
})
export class AutoRefreshComponent implements OnInit {
private subscription: Subscription;
@Output() TimerExpired: EventEmitter<any> = new EventEmitter<any>();
@Input() SearchDate: moment.Moment = moment();
@Input() ElapsTime: number = 3;
searchEndDate: moment.Moment;
remainingTime: number;
minutes: number;
seconds: number;
everySecond: Observable<number> = timer(0, 1000);
constructor(private ref: ChangeDetectorRef) {
this.searchEndDate = this.SearchDate.add(this.ElapsTime, "minutes");
}
ngOnInit() {
this.subscription = this.everySecond.subscribe((seconds) => {
var currentTime: moment.Moment = moment();
this.remainingTime = this.searchEndDate.diff(currentTime)
this.remainingTime = this.remainingTime / 1000;
if (this.remainingTime <= 0) {
this.SearchDate = moment();
this.searchEndDate = this.SearchDate.add(this.ElapsTime, "minutes");
this.TimerExpired.emit();
}
else {
this.minutes = Math.floor(this.remainingTime / 60);
this.seconds = Math.floor(this.remainingTime - this.minutes * 60);
}
this.ref.markForCheck()
})
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
everySecond: Observable<number> = timer(0, 1000);
this.subscription = this.everySecond.subscribe((seconds) => {
var currentTime: moment.Moment = moment();
this.remainingTime = this.searchEndDate.diff(currentTime)
this.remainingTime = this.remainingTime / 1000;
if (this.remainingTime <= 0) {
this.SearchDate = moment();
this.searchEndDate = this.SearchDate.add(this.ElapsTime, "minutes");
this.TimerExpired.emit();
}
else {
this.minutes = Math.floor(this.remainingTime / 60);
this.seconds = Math.floor(this.remainingTime - this.minutes * 60);
}
this.ref.markForCheck()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment