Expandable rows on material table are not working after sorting

0
votes

Based on the samples in Angular Material Table I added expandable rows and sorting to my table. Each feature works like a charm for itself. But when I try to expand a row after the table was sorted, the first click seems to do nothing at all. The second click opens the row and instantly closes it again. When I click the same row again, it behaves normally again.

Here's a simplified version on stackblitz: https://stackblitz.com/edit/angular-mnqztk

As far as I could find out with logging, the expandedElement property is set correctly for each click, no matter if the table was sorted or not. So I guess there's somthing wrong with the animations trigger detailExpand. I just cannot figure out why it's not getting triggered, when expandedElement is set after the table is sorted.

1
angularangular-material

1 Answers

1
votes

I stumbled over this github issue, which indirectly solves my problem. Instead of the animation used in on the Angular Material page, use the following:

animations: [
    trigger('expandDetail', [
      state('collapsed, void', style({ height: '0px' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])

That's it. Problem solved.