Only re-render templates if the corresponding properties have actually changed

[Nick Dziura]

I have a stackblitz project here: https://stackblitz.com/edit/angular-hlndpc-g6dfgj?file=src%2Fmain.ts

The values update at random to simulate telemetry coming in remotely. Some values will have their statuses changed while others will not. My aim is to only re-render the rows that have their values updated and not the others.

I have tried using immutable mode, however the templates are always re-initialised for every row whenever a change comes through, regardless of whether the values were actually changed. Is this possible to do without a deep compare of all the current and previous values to determine which ones have changed?

[Dineshnarasimman Muthu]

Hi Nick,

Sorry for the delay response. We have reviewed your query about re rendered only the updated field. We have validated the sample which you have provided. We suggest you to use setCellValue() method to update the value of a row in the grid by setting true for allowEditing property. We have attached the modified code snippet and sample for your reference.

    this.interval = setInterval(() => {

      this.updateData();

    }, 1000);

  }

  updateData() {

    if (this.randomBoolean()) {

      this.gridInstance.grid.setCellValue(0, 'moduleStatus', 'Offline');

    } else {

      this.gridInstance.grid.setCellValue(0, 'moduleStatus', 'Online');

    }

  }

  randomBoolean() {

    return Math.random() < 0.5;

  }

 

Sample: https://stackblitz.com/edit/angular-hlndpc-rjeqyk?file=src%2Fapp.component.ts

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman