Search code examples
angularangular-materialcollapsableangular-material-table

Keep expanded mat-table from collapsing row when datasource updates (Angular Material)


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.


Solution

  • 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. :)