angular material Data table with sorting, pagination, and filtering page issue

Question

I am trying to follow Angular Material Data table with sorting, pagination, and filtering from this link.

Everything seems to work OK but I am being block by the following. Do you guys know how to fix this? It does not happen on Firefox but it happens on chrome or chromium.

In case if you need the version no

Angular CLI: 6.0.8
Node: 8.11.4
OS: linux x64
Angular: 6.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.4.6
@angular/cli                      6.0.8
@angular/material                 6.4.6
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

Answer 1

Adding Theme fixes my issue.

As guided here

I put the following in style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

It is now working as expected.