Angular Material tabs not showing content

Question

I'm trying to create a material tab group like this one in the Angular Material component documentation.

The problem I'm encountering is that the content of the tabs isn't loading/showing. I've copied the exact code from the docs, but still no luck.

The code I used:

<mat-tab-group>

  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>

  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>

</mat-tab-group>

I've recreated the issue on StackBlitz

Sébastien Sébastien · Accepted Answer · 2018-01-30T23:20:19

You need to import BrowserAnimationsModule in your app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and add it to the imports array:

imports: [
    BrowserAnimationsModule,
    ...

Also you don't need to import NoopAnimationPlayer

See updated blitz.

Angular Material tabs not showing content

1 Answers