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 ?
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);
}
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
ChangeDetectorRef everyting is going to be updated at time that you save you file. Check the demo that I did in the postBecause 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);
}
@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.name property on parent component ?
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!ApplicationRef.tick() or ChangeDetectorRef.detectChanges() .because in Angular 1 whenever we use setTimout we need to run digest cycle , but here without this it worksetTimeout() 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.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}`;
});
