Angular material expandable table doesn't work

0
votes

I want to reproduce the "Table with expandable rows" example from https://material.angular.io/components/table/examples. I've created a new Angular project, added Angular material and literally copied the example content into my project. And yet, the rows are not expanding as in the example. I'm trying different imports, different styles - nothing. What am I missing?

Here's how it looks: enter image description here

Here's my project on stackblitz: https://stackblitz.com/edit/github-fc2cyw-ftpmac

1
angularangular-materialangular9

1 Answers

0
votes

Your Edited Stackblitz: https://stackblitz.com/edit/github-fc2cyw-wtqvd4

Change the style url from table.component.html to table.component.css

@Component({
  selector: 'app-table',
  styleUrls: ['table.component.html'],
  templateUrl: 'table.component.css',
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],