Hi I am trying to get an example of a countdown timer I found searching on Stack found here: Time CountDown in angular 2
This is my code:
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subscription, interval } from 'rxjs';
@Component({
selector: 'app-timer',
templateUrl: './timer.component.html',
styleUrls: ['./timer.component.css']
})
export class TimerComponent implements OnInit {
private future: Date;
private futureString: string;
private diff: number;
private $counter: Observable<number>;
private subscription: Subscription;
private message: string;
constructor(elm: ElementRef) {
this.futureString = elm.nativeElement.getAttribute('inputDate');
}
dhms(t) {
let days, hours, minutes, seconds;
days = Math.floor(t / 86400);
t -= days * 86400;
hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
minutes = Math.floor(t / 60) % 60;
t -= minutes * 60;
seconds = t % 60;
return [
days + 'd',
hours + 'h',
minutes + 'm',
seconds + 's'
].join(' ');
}
ngOnInit() {
this.future = new Date(this.futureString);
this.$counter = Observable.interval(1000).map((x) => {
this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
return x;
});
this.subscription = this.$counter
.subscribe((x) => this.message = this.dhms(this.diff));
}
}
Getting the following error:
timer/timer.component.ts(44,34): error TS2339: Property 'interval' does not exist on type 'typeof Observable'.
I have tried every measure of importing I could find on Google but nothing has worked. I also updated to the latest version of rxjs and still nothing. Any help would be greatly appreciated.
I believe I may have some kind of versioning issue or something. Really stumped.
npm ERR! peer dep missing: jquery@1.9.1 - 3, required by bootstrap@4.1.1 npm ERR! peer dep missing: popper.js@^1.14.3, required by bootstrap@4.1.1 npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.9.1 npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1 npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1 npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4 npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11 npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11 npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2 npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6 npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6 npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1 npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4 npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4 npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4 npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2 npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2 npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2 npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0 npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1 npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2 npm ERR! missing: inherits@2.0.3, required by glob@7.1.2 npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2 npm ERR! missing: once@1.4.0, required by glob@7.1.2 npm ERR! missing: once@1.4.0, required by inflight@1.0.6 npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6 npm ERR! missing: wrappy@1.0.2, required by once@1.4.0 npm ERR! missing: minipass@2.2.4, required by tar@4.4.1 npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1 npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1 npm ERR! missing: yallist@3.0.2, required by tar@4.4.1 npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5 npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4 npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4 npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0
Simply write:
import { interval } from 'rxjs';
import { map } from 'rxjs/operators'
interval(1000).pipe(
map((x) => { /* your code here */ })
);
In RxJS 6+ there's no Observable.interval function.