1

I am trying to update property after some time .but it is not reflecting on view why ?

Here is my code:

https://stackblitz.com/edit/angular-grjd1u?file=src%2Fapp%2Fhello.component.ts

ngOnInit(){
    this.ls = "dddd"
     setTimeout(function(){ 
      this.name ="helllllll"
     }, 3000);
  }

I am trying to update my name property after 3 sec .but it is not updating.

Why change detection is not working ?

3 Answers 3

1

You need to implement the interface OnChanges to get the name reference and do the change in the var name this function its executed after ngInit and ngOnChanges its triggered when you are using @Input() decorator demo

ngOnChanges(changes: any): void {
  this.ls = "dddd"
     setTimeout(() => { 
    this.name = "helllllll"
  }, 3000);

}
Sign up to request clarification or add additional context in comments.

7 Comments

ok got it my question is when I use this method ApplicationRef.tick() or ChangeDetectorRef.detectChanges() .because in Angular 1 whenever we use setTimout we need to run digest cycle , but here without this it work
Nice!, you don't need to manipulate ChangeDetectorRef everyting is going to be updated at time that you save you file. Check the demo that I did in the post
but here you did not use `ChangeDetectorRef``
because It is no necesary
so my Question is which case we run changdetectorref manually
|
1

Because in your callback for setTimeout, this is the Window object, not your component instance. You can fix this by using an arrow function, which binds this to the context in which the function was declared:

ngOnInit(){
   this.ls = "dddd"
   setTimeout(() => { 
      this.name = "helllllll"
   }, 3000);
}

10 Comments

Also, you shouldn't really be modifying @Inputs from a child component itself - the parent component is the one who modifies inputs - but this answers why your change detection "isn't working" at least.
will I change this name property on parent component ?
Totally agree with @matmo. Change the value of name in your parent component (i.e. app.component.ts) rather than changing an @Input() value! Change detection will then automatically kick in and do the rest!
ok got it my question is when will I use this method ApplicationRef.tick() or ChangeDetectorRef.detectChanges() .because in Angular 1 whenever we use setTimout we need to run digest cycle , but here without this it work
@naveen Yes you are totally right. Angular 1 was not aware of certain changes like the ones done in a setTimeout() function, which is in fact asynchronous. But in Angular >= 2 the change detection is invoked automatically when a user provides some input or when a browser event is called. It also detects changes automatically when properties are updated after a new HTTP request. AND the mosit important fact for you is, that Angular >= 2 is also able to automatically detect changes that have been made in a setTimeout() or setInterval() method.
|
0

Use Observable:

// Create observable
const myObservable = new Observable((observer) => {
    setInterval(() => observer.next({ name: 'John Doe', time: new Date().toString() }), 3000);
})

// Subscribe to the observable
myObservable.subscribe((x: any) => {
    this.name = `${x.name}, Time: ${x.time}`;
});

https://stackblitz.com/edit/angular-ce3x4v

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.