title: How to expand Angular Material Tab to show Angular Grid data?
body: <p>I am using Angular 8 and want to show Angular Grid inside Angular Material Tab in following manner:-</p>
  
  <pre><code>&lt;mat-tab-group&gt;
          &lt;mat-tab label="Request Flow"&gt;
              &lt;div class="div-main"&gt;
                  &lt;ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
                      [gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
                      [getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)"&gt;
                  &lt;/ag-grid-angular&gt;
                  &lt;br /&gt;                
                  &lt;button class="button-internal"&gt;Add Subrequest&lt;/button&gt;
              &lt;/div&gt;
          &lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>The issue is that even if data present in Angular Grid then also Angular Material Tab is not expanding to make Angular Grid visible. It is showing like below:-</p>
  
  <p><a href="https://i.stack.imgur.com/bLrs2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bLrs2.png" alt="enter image description here"></a></p>
  
  <p>However when I put Angular Grid outside Angular Material Tab then the grid is showing its full data.</p>
  
  <p>I tried to use "dynamicHeight" property of "mat-tab-group" but it is of no use.</p>
  
  <p>Please help here.</p>