Access component from template

Hi folks!
I have a DataList bound to an array and inside the template I have a DataGrid bound to a child of the item. Data is loaded correctly on both components.
The problem happens if I manipulate the source. On the DataList adding or removing item works fine. On DataGrid, nothing happen.
The problems are:

  • first, I cannot access a component from custom expression in order to try to force data reloading, since fields contained by the class are related to non template instances
  • second, even if I change the autogenerated code manually in order to set to null the DataGrid data and try to rebound it, nothing happen

Any idea?

Hi @Ricciolo,

How are you updating the DataGrid? The PrimeNG component that we use updates when the whole array of data items changes. Is this the case in your application?

On click event of a button inside the template I push a new element into the array


DataGrid is bound to data.parameters

Try changing data.parameters instead of using the push method. Something like this:

data.parameters = [...data.parameters, { /* */ } ]

This comes straight from the PrimeNG documentation

Change Detection

Table may need to be aware of changes in its value in some cases such as reapplying sort. For the sake of performance, this is only done when the reference of the value changes meaning a setter is used instead of ngDoCheck/IterableDiffers which can reduce performance. So when you manipulate the value such as removing or adding an item, instead of using array methods such as push, splice create a new array reference using a spread operator or similar.

1 Like

Ok, now tt works! thank you