typescript - Updating textview at a interval using Angular $interval -

i still new ionic , angular. want update textview number going 10 0 , update each second.

in class got property public timeleft: string = 'your timer'; bound html <div>{{timeleft}}</div>

i have tried using regular javascript setinterval() fails when i'm trying update property timeleft using keyword this because this not in same scope class when running setinterval function.

i've read should use angular function $interval because has access same scope or view, didn't quite understand part fully.

i found pieces of code saying should make controller , should contain along lines of myapp.controller(function($scope, $interval) {...})

on ionic blog found post mentioning angular 1 concepts controllers , scope out.

so question is. how use angular $interval update textview @ interval in ionic? full code example fantastic i'm literally lost here.

• cli-utils: 1.9.2
• ionic cli: 3.9.2
• cordova cli: 6.5.0
• ionic app-scripts: 2.1.3
• ionic framework: ionic-angular 3.6.0

you can use observable.timer here.please try below code.

creates observable starts emitting after initialdelay , emits ever increasing numbers after each period of time thereafter.

its interval, can specify when should emissions start.

here working plunker

import {component} '@angular/core' import {observable} 'rxjs/observable' import 'rxjs/add/observable/timer' import 'rxjs/add/operator/map' import 'rxjs/add/operator/take'  @component({   selector: 'my-app',   template: `     <div>       <h1>countdown timer</h1>       <h2>{{timeleft | async}}</h2>     </div>   `, }) export class myapp {    timeleft;   counter = 10;   constructor() {      this.timeleft = observable.timer(1000,1000)       .take(this.counter)       .map(() => --this.counter)    } } 

update:

html

 <h2>{{timeleft}}</h2> 

.ts

 observable.timer(1000,1000)       .take(this.counter)       .map(() => --this.counter).subscribe(val => {           //you can transformation here        } 

wiki