The updated value is not reflecting in the html angular 2

Question

app.component.html

    {{loading_message}}

app.component.ts

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     providers: [ApiBridgeService]
 })
 export class AppComponent {
     title = 'app works!';
     loading_message: String;

     constructor() {
         this.loading_message = "Init";
         setInterval(this.change_loading_message, 1000)
    }

     change_loading_message() {
        this.loading_message = "Executing"
     }
}

In html it always displays Init

Expected result :

It should display executing after a 1000ms.

setInterval probably changed the this to be global, would check on that. you might have to add .bind(this) — tik27, May 28 '17 at 15:49
try this line setInterval( () => {this.change_loading_message}, 1000) — Dinesh undefined, May 28 '17 at 15:51

CozyAzure · Answer 1 · 2017-05-28T16:57:17.867

1

If you are using Observables (which you should), it is quite trivial to achieve that. I recommend an ngOnInit to 'kickoff' the observable at the point the component is initialized.

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     providers: [ApiBridgeService]
 })
 export class AppComponent {
     title = 'app works!';
     loading_message: String;

     constructor() {
         this.loading_message = "Init";
     }

     ngOnInit(){
       Observable
           .empty()      //this is optional
           .delay(1000)  //delay for 1000ms
           .subscribe(()=>{  //subscribe to the observables!
              this.loading_message = "Executing"  //change your message!
           }); 
     }
}

To use the .delay() operator, you will need to import it:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/delay';

Note that the .empty() is optional. I like to use a .empty() to explicitly indicates that this observables is not going to return anything. If you are using .empty, you need to import it as well:

import 'rxjs/add/observable/empty`

More detailed explanation on Observables.delay()

edited May 28 '17 at 16:57

answered May 28 '17 at 15:52

CozyAzure

8,280
7
34
52

How do I stop this Timer? – bashIt May 28 '17 at 15:57
You don't need to stop the timer. What ever is in the subscribe call back function will be executed once the delay is done. – CozyAzure May 28 '17 at 15:59
its throwing error **Property 'empty' does not exist on type 'typeof Observable'** – bashIt May 28 '17 at 16:37
You need to import it. `import rxjs/add/observable/empty` – CozyAzure May 28 '17 at 16:45
sorry I did, import {Observable} from 'rxjs/Observable' if I import 'import rxjs/add/observable/empty' it throws an error. – bashIt May 28 '17 at 16:49
now it throws 'Property 'delay' does not exist on type 'Observable<{}>'. – bashIt May 28 '17 at 16:52
Oh my, I am spoon feeding am I. See edit. – CozyAzure May 28 '17 at 16:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145315/discussion-between-sandeep-kumar-and-cozyazure). – bashIt May 28 '17 at 16:56

The updated value is not reflecting in the html angular 2

1 Answers1