title: How to add pagination in angular material table that bind to API response
body: <p>I'm new to angular. In my project shown list of products and its work correctly.</p>
  <p>My HTML code is below :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]=&quot;list_product&quot; style=&quot;width: 20%;&quot;&gt;
      &lt;!-- id Column --&gt;
      &lt;ng-container matColumnDef=&quot;id&quot; style=&quot;width: 20%;&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef style=&quot;align-items: center;&quot;&gt; id &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let list_product&quot;&gt; {{list_product.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- description Column --&gt;
      &lt;ng-container matColumnDef=&quot;description&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let list_product&quot;&gt; {{list_product.description}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;mat-paginator [pageSizeOptions]=&quot;[5, 10, 20]&quot; showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  <p>and my TypeScript code is -</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit,ViewChild } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { analyzeAndValidateNgModules } from '@angular/compiler';
  import { MatPaginator} from '@angular/material/paginator';
  import { MatTableDataSource} from '@angular/material/table';
  
  @Component({
      selector: 'app-basic',
      templateUrl: './basic.component.html',
      styleUrls: ['./basic.component.scss']
  })
  export class BasicComponent implements OnInit {
  
      public list_product:any=[];
      displayedColumns: string[] = ['id', 'description'];
      @ViewChild(MatPaginator) paginator: MatPaginator;
  
      constructor(private http:HttpClient) { }
  
      ngOnInit(): void {
          this.get_data();
          this.list_product.paginator = this.paginator;
      }
  
      get_data(){
          this.http.get&lt;any&gt;(&quot;http://localhost:3000/listp&quot;).subscribe(
              res =&gt; this.list_product = res
          )
      }
  }
  </code></pre>
  <p>Pagination does not work and all of list are shown. Pagination buttons does not work in html file.</p>