title: Pagination in angular material from data fetched from an api
body: <p>I get a list of 100+ users fetched from an api. Now I would like to implement that data in the angular material table.</p>
  <p>Is it possible in the frontend that i display only 10 users in pageSize and have pagination. I tried but it displays all available users eventhough I have pagination module implemented.</p>
  <pre><code>&lt;mat-paginator [pageSize]=&quot;10&quot; showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  <p>In the typescript code, i get the list from the parent component.</p>
  <pre><code>import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.scss']
  })
  export class UsersComponent implements OnInit, OnChanges {
    @Input() users;
  
    displayedColumns = ['name', 'id'];
    dataSource;
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    constructor() { }
  
    ngOnChanges() {
      this.dataSource = new MatTableDataSource&lt;any&gt;(this.users);
    }
  
    ngOnInit() {
      this.dataSource.paginator = this.paginator;
    }
  }
  </code></pre>