title: How to implement a Pagination for dynamic data from a HTTP-Table on Angular
body: <p>How i can bind a Paginator, that changes the Items per Page when i change the Number f.e. from 10 to 5. Now i can change the number of the paginator, but the table and the shown data are the same.</p>
  
  <p><strong>this is my HTML-Component</strong></p>
  
  <pre><code> &lt;div class="example-container"&gt;
  &lt;table mat-table [dataSource]="dataSource"  class="example-table"
   matSort &gt;....
  
  &lt;mat-paginator [length]="resultsLength"
                 [pageSize]="pageSize"
                 [pageSizeOptions]="pageSizeOptions"
                  showFirstLastButtons
                 (page) ="pageEvent = $event"&gt;
  &lt;/mat-paginator&gt;
  </code></pre>
  
  <p><strong>And this is my Typescript-File</strong></p>
  
  <pre><code>export class TableHttpExample implements AfterViewInit , OnInit {...
  
    displayedColumns: string[] = ['CheckboxA','UserName','name', 'vorname', 'email', 'Strasse', 'PLZ'];
    exampleDatabase: ExampleHttpDatabase | null;
    data: User[] = [];
    dataSource = new MatTableDataSource&lt;User&gt;(data);
    resultsLength = null;
    isLoadingResults = true;
    checkbox_list =[];
    isRateLimitReached = false;
    user: User;
    pageSize = 10;
    pageSizeOptions: number[] = [5, 10, 25, 100];
    pageEvent: PageEvent;
  
  
     ...
  
     ngOnInit() {
       this._dataService.getUsers().subscribe((Users: User[]) =&gt; this.loadUsers(Users));
       this.checkbox_list = [User];
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
      };
  
  
      loadUsers(Users) {
        this.dataSource = Users;
        this.resultsLength = Users.length;
        this.pageSize = Users.length;
        this.isLoadingResults = false;
      }
  </code></pre>