title: angular primeng p-table pagination not working
body: <p>When populating the table array inside a the <code>get()</code> function, the paginator does not working. It only shows 1 of 1 page.</p>
  
  <p>It works fine when the table array is populated inside <code>ngInit()</code>, showing 1 of 5 pages.</p>
  
  <p>This is very weird looks like a bug ? any ideas?  My angular component is below.</p>
  
  <p><strong>test.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="p-col-1"&gt;
    &lt;button pButton type="button" label="GET" (click)="get()"&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="p-grid"&gt;
    &lt;div class="p-col"&gt;
      &lt;p-table
        [value]="workingArr"
        [rows]="2"
        [paginator]="true"
        [responsive]="true"
        autoLayout="true"
      &gt;
        &lt;ng-template pTemplate="header"&gt;
          &lt;tr&gt;
            &lt;th&gt;testPaginator&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-workingArr&gt;
          &lt;tr&gt;
            &lt;td&gt;{{workingArr}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
      &lt;/p-table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="p-grid"&gt;
    &lt;div class="p-col"&gt;
      &lt;p-table
        [value]="notworkingArr"
        [rows]="2"
        [paginator]="true"
        [responsive]="true"
        autoLayout="true"
      &gt;
        &lt;ng-template pTemplate="header"&gt;
          &lt;tr&gt;
            &lt;th&gt;testPaginator&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-notworkingArr&gt;
          &lt;tr&gt;
            &lt;td&gt;{{notworkingArr}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/ng-template&gt;
      &lt;/p-table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>test.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from "@angular/core";
  
  @Component({
    selector: "app-test",
    templateUrl: "./test.component.html",
    styleUrls: ["./test.component.css"]
  })
  export class TestComponent implements OnInit {
    workingArr: string[] = [];
    notworkingArr: string[] = [];
  
    constructor() {}
  
    ngOnInit() {
      for (let a = 0; a &lt; 10; a++) {
        this.workingArr[a] = "test" + a;
        console.log("in init");
      }
    }
  
    get() {
      for (let b = 0; b &lt; 10; b++) {
        this.notworkingArr[b] = "test" + b;
        console.log("in get");
      }
    }
  }
  </code></pre>
  
  <p>this is the result after clicking the get button</p>
  
  <p><a href="https://i.stack.imgur.com/UfqqZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UfqqZ.png" alt="see image here"></a></p>