9.08.2017

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 );
  }

No comments:

Post a Comment