Angular Material Table Dynamic Height

For md-table, the height can be dynamically adjusted this way...

1. sample-table.component.html
<div class="example-container mat-elevation-z8" [style.max-height.px]="tableHeight">
  ...
  <md-table #table [dataSource]="dataSource" mdSort>

2. sample-table.component.ts
import { HostListener } from '@angular/core';

export class SampleTableComponent {
  tableHeight: number;

  ngOnInit() {
    this.tableHeight = window.innerHeight - 90;
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize(event){
    this.tableHeight = event.target.innerHeight - 90;
    console.log("height: " + this.tableHeight );
  }

Angular Starter Project with Material

Follow angular setup from this post.
Reference posts from here and here. And from a starter project.

1. Create angular project
$ ng new management-gui
$ cd management-gui

2. Get Angular Material
$ yarn add @angular/material @angular/animations @angular/cdk

3. Get HammerJs and add to .angular-cli.json
$ yarn add hammerjs
$ vi .angular-cli.json
"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

4. Add Angular Material on to app.module.ts
$ vi src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Set global styles.css with an Angular Material theme
$ vi src/styles.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

6. Add Material icons in index.html
$ vi src/index.html