How does Angular components re render when data is updated?

Question

I would like to understand how an Angular component re-render to display the new information whenever there is a change in the underlying data. (eg. push/delete)

I have the following component that uses a data service to get the data. When the component is first initialised, the constructor is executed and existing data is retrieved if any.

Table.component.ts

export class TableComponent implements OnInit {
  table : Task[]
  dropdowns = ["green", "yellow", "red"]
  taskName : string
  taskStatus : string
  @ViewChild('form') form: NgForm

  
  constructor(private tableService : TableService) {
    // if I comment the line below my table does not get updated when submitTask() is run.
    this.table = tableService.getData();
  }
 
  submitTask() {
    const taskName : string = this.form.form.value.taskName
    const taskStatus : string = this.form.form.value.taskStatus
    const task: Task = {item: taskName, status: taskStatus}
    this.tableService.addData(task)
  }

  ngOnInit(): void {

  }

}

Table.service.ts

export class TableService {
  tableData : Task[] = []

  constructor() { }

  addData(task : Task) {
    this.tableData.push(task)
  }

  getData() : Task[] {
    return this.tableData
  }


}

the submitTask() function of the component uses the tableService to update the table data source. Whenever submitTask() is called, it seems that the this.table array suddenly gets updated as well. Is the constructor of the TableComponent called again ? I am not sure of the angular workflow for handling data changes.

I think this is a useful article: [Angular change detection](https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/) — Beller, Aug 28 '21 at 08:12

score 2 · Answer 1 · answered Aug 28 '21 at 07:35

2

You didn't share the service code with us but likely your getData() is just returning the array reference stored in the service.

This means that the component table is then assigned this reference and thus any change in the array in the service is reflected in the component because they basically are pointing to the same data.

Is the constructor of the TableComponent called again ?

No.

answered Aug 28 '21 at 07:35

Gaël J

11,274
4
17
32

I have added the tableService method. You are right in that it is just returning the array. Is the angular component re-rendering in that case ? In `ReactJS` any state variable change will cause the component to re-render. Because I don't have the `@Input()` decorator, I don't understand why the component will re-render it's view. – calveeen Aug 28 '21 at 07:44
I recommend reading about change detection, there are different situations, long to explain in one comment. – Gaël J Aug 28 '21 at 08:20

score 2 · Answer 2 · answered Aug 28 '21 at 09:12

You could use ChangeDetectorRef for refreshing the data.

import { ChangeDetectorRef } from '@angular/core';

//...

table: Task[];

constructor(private changeDetectorRefs: ChangeDetectorRef, 
            private tableService : TableService) { }

//...

ngOnInit(): void {
  this.refresh();
}

refresh() {      
   this.tableService.getData().subscribe((data: Task[]) => {
   this.table = data;
   this.changeDetectorRefs.detectChanges();
  }
}

How does Angular components re render when data is updated?

2 Answers2