title: Angular 4 + Primeng (datatable) : custom scrollHeight property
body: <p>I'm a beginner working on an app built with Jhipster, using Angular 4.3 and PrimeNg. </p>
  
  <p>I've a table (datatable, because turbotable is since Angular 5). I would like to customise the scrollHeight property according to a boolean in order to have a bigger table if my boolean is true, smaller if my boolean is false. </p>
  
  <p><strong>* Here is my HTML which works *</strong></p>
  
  <pre><code>&lt;p-dataTable [value]="objects" scrollable="true" scrollHeight="200px" emptyMessage="" [loading]="loading"&gt;
       &lt;p-column field="name" header="Name" [sortable]="true"&gt;&lt;/p-column&gt;
  ... other columns
  &lt;/p-dataTable&gt;
  </code></pre>
  
  <p>But I have a button which extends a part of my screen, so I would like my scrollHeight becoming : <code>scrollHeight="400px"</code> </p>
  
  <p><strong>* Button code *</strong></p>
  
  <pre><code>&lt;div class="col col-lg-12"&gt;
      &lt;div class="row text-center" style="padding: 10px"&gt;
          &lt;div class="col-lg"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal" (click)="extendOrReduceTheTop()"&gt;
                  &lt;span [ngClass]="{'fa-caret-up': extend, 'fa-caret-down': !extend}" class="fa"&gt;&lt;/span&gt;&amp;nbsp;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>* TS BUTTON *</strong></p>
  
  <pre><code>extendOrReduceTheTop() {
      this.extend = !this.extend;
  }
  </code></pre>
  
  <p>The official documentation is here : 
  <a href="https://www.primefaces.org/primeng/#/datatable/scroll" rel="nofollow noreferrer">Documentation scroll on datatable</a></p>
  
  <p>I've read the doc, tried several personalized solutions, but none of them work : </p>
  
  <pre><code>&lt;p-dataTable [value]="objects" scrollable="true" [ngStyle]="{'scrollHeight': extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading"&gt;
  
  &lt;p-dataTable [value]="objects" scrollable="true" [scrollHeight]="{extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading"&gt;
  </code></pre>
  
  <p>This one with the value changed in ts (but the table is not re rendered so... It's useless: </p>
  
  <pre><code>&lt;p-dataTable #tableCara [value]="aeroportsCaract" scrollable="true" [scrollHeight]="scrollheight" emptyMessage="" [loading]="loading"&gt;
  </code></pre>
  
  <p>Does anyone have an idea ?</p>