MatSort breaks MatTable detail row animations

When using Flex layout (no 'table', 'tr', 'td' elements), I cannot get animation triggers to work reliably with sorting. Some rows are just randomly dead after sorting the table. I'm using Angular 10.

After four hours of debugging and testing, I moved to [ngClass] and css animations, which works flawlessly.

  > mat-row.detail-row {
    overflow: hidden;
    border-style: none;
    min-height: auto;
    &.detail-row-collapsed {
      max-height: 0;
      transition: max-height .4s ease-out;
    }
    &.detail-row-expanded {
      max-height: 1000px;
      transition: max-height .4s ease-in;
    }
  }

Note: This works for Angular < 10, see below for Angular >= 10 solution

I have had the same problem and fixed by adding an additional void state by changing the animation from

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

to

trigger('detailExpand', [
  state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
  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)'))
])

Only changes are first state('collapsed' to state('collapsed, void' and the last transition(...) line.

Now both sorting and expanding rows work as expected.

Credit to pabloFuente for solution here.

Angular 10 solution

export const detailExpand = trigger('detailExpand',
    [
        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)'))
    ]);