Question

What are the possible data update scenarios for change detection?

Answer 1

The change detection works in the following scenarios where the data changes needs to update the application HTML.

1. Component initialization: While bootstrapping the Angular application, Angular triggers the ApplicationRef.tick() to call change detection and View Rendering.
2. Event listener: The DOM event listener can update the data in an Angular component and trigger the change detection too.

   @Component({
     selector: 'app-event-listener',
     template: `
       <button (click)="onClick()">Click</button>
       {{message}}`
   })
   export class EventListenerComponent {
     message = '';
   
     onClick() {
       this.message = 'data updated';
     }
   }
3. HTTP Data Request: You can get data from a server through an HTTP request

   data = 'default value';
   constructor(private httpClient: HttpClient) {}
   
     ngOnInit() {
       this.httpClient.get(this.serverUrl).subscribe(response => {
         this.data = response.data; // change detection will happen automatically
       });
     }
4. Macro tasks setTimeout() or setInterval(): You can update the data in the callback function of setTimeout or setInterval

   data = 'default value';
   
     ngOnInit() {
       setTimeout(() => {
         this.data = 'data updated'; // Change detection will happen automatically
       });
     }
5. Micro tasks Promises: You can update the data in the callback function of promise

   data = 'initial value';
   
     ngOnInit() {
       Promise.resolve(1).then(v => {
         this.data = v; // Change detection will happen automatically
       });
     }
6. Async operations like Web sockets and Canvas: The data can be updated asynchronously using WebSocket.onmessage() and Canvas.toBlob().