Angular material expandable table doesn't work

Issue

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:

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

Solution

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)')),
    ]),
  ],

Answered By - M A Salman