3

I am building an app which uses live data that should update every few seconds. I am using mat-table, which displays an addition mat-table inside the collapsable row. The collapse works fine, but when I update the datasource it collapses. Is there any way to prevent/override this behaviour? I edited the collapsing example to show what I mean: https://stackblitz.com/edit/angular-3yukjz - just press the first element, it will collapse as the datasource is changed.

Lars Rødal
  • 809
  • 1
  • 9
  • 26

1 Answers1

1

I ended up solving this by adding a boolean 'expanded' to my datamodel, which by default was false. On the click-method for the rows I sent the row in and looped over all rows - when it found the correct row it inverted the boolean and exited the function. Then, when updating the data, I overwrote the it in the array connected to the dataSource, instead of doing it to the dataSource directly. The rows now stay open even when updating, and you can have multiple rows open at the same time. :)

Lars Rødal
  • 809
  • 1
  • 9
  • 26
  • hey lars, can you explain yourself a little more? what do you mean by updating the array contected to the datasrouce? you mean you did something like this.dataSource.data = someArray instead of creating a new datasource altogether? – Elazar Zadiki Aug 03 '20 at 12:07
  • I'd love to see the code sample – Smokovsky Sep 12 '22 at 14:36
  • https://stackblitz.com/edit/angular-eqpy72?file=src%2Fapp%2Ftable-expandable-rows-example.ts If you want to close the other rows when opening this one just call a function instead of setting the bool directly on the element, then map the necessary values in the dataSource – Lars Rødal Sep 14 '22 at 10:16