title: angular 7: Server Side Pagination Using Angular Material
body: <p>I am using Angular 7 and Angular Material as server-side pagination. I got problem with this matter. The problem is the pagination become like this.</p>
  
  <p><a href="https://i.stack.imgur.com/qCntw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCntw.jpg" alt="enter image description here"></a></p>
  
  <p>I want to change pagination to become like this 
  <a href="https://i.stack.imgur.com/BzTJs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BzTJs.jpg" alt="enter image description here"></a></p>
  
  <p>How to change it. Example code like bellow:-</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
    &lt;div class="example-loading-shade"
         *ngIf="isLoadingResults || isRateLimitReached"&gt;
      &lt;mat-spinner *ngIf="isLoadingResults"&gt;&lt;/mat-spinner&gt;
      &lt;div class="example-rate-limit-reached" *ngIf="isRateLimitReached"&gt;
        GitHub's API rate limit has been reached. It will be reset in one minute.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="example-table-container"&gt;
  
      &lt;table mat-table [dataSource]="data" class="example-table"
             matSort matSortActive="created" matSortDisableClear matSortDirection="desc"&gt;
        &lt;!-- Number Column --&gt;
        &lt;ng-container matColumnDef="number"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;#&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.number}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Title Column --&gt;
        &lt;ng-container matColumnDef="title"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Title&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.title}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- State Column --&gt;
        &lt;ng-container matColumnDef="state"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;State&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.state}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Created Column --&gt;
        &lt;ng-container matColumnDef="created"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header disableClear&gt;
            Created
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.created_at | date}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;mat-paginator [length]="resultsLength" [pageSize]="30"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component ts</strong></p>
  
  <pre><code>export class TableHttpExample implements AfterViewInit {
    displayedColumns: string[] = ['created', 'state', 'number', 'title'];
    exampleDatabase: ExampleHttpDatabase | null;
    // data: GithubIssue[] = [];
  
    resultsLength = 0;
    isLoadingResults = true;
    isRateLimitReached = false;
  
    @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: false}) sort: MatSort;
  
    constructor(private _httpClient: HttpClient) {}
  
    ngAfterViewInit() {
      this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
  
      // If the user changes the sort order, reset back to the first page.
      this.sort.sortChange.subscribe(() =&gt; this.paginator.pageIndex = 0);
  
      merge(this.sort.sortChange, this.paginator.page)
        .pipe(
          startWith({}),
          switchMap(() =&gt; {
            this.isLoadingResults = true;
            return this.exampleDatabase!.getRepoIssues(
              this.sort.active, this.sort.direction, this.paginator.pageIndex);
          }),
          map(data =&gt; {
            // Flip flag to show that loading has finished.
            this.isLoadingResults = false;
            this.isRateLimitReached = false;
            this.resultsLength = data.total_count;
  
            return data.items;
          }),
          catchError(() =&gt; {
            this.isLoadingResults = false;
            // Catch if the GitHub API has reached its rate limit. Return empty data.
            this.isRateLimitReached = true;
            return observableOf([]);
          })
        ).subscribe(data =&gt; this.data = data);
    }
  }
  </code></pre>
  
  <p><strong>Service ts</strong></p>
  
  <pre><code>export interface GithubApi {
    items: GithubIssue[];
    total_count: number;
  }
  
  export interface GithubIssue {
    created_at: string;
    number: string;
    state: string;
    title: string;
  }
  export class ExampleHttpDatabase {
  data: GithubIssue[] = [];
  
  
  
  /** An example database that the data source uses to retrieve data for the table. */
  
    constructor(private _httpClient: HttpClient) {}
  
    getRepoIssues(sort: string, order: string, page: number): Observable&lt;GithubApi&gt; {
      const href = 'https://api.github.com/search/issues';
      const requestUrl =
          `${href}?q=repo:angular/components&amp;sort=${sort}&amp;order=${order}&amp;page=${page + 1}`;
  
      return this._httpClient.get&lt;GithubApi&gt;(requestUrl);
    }
  }
  </code></pre>
  
  <p>I've try to change it but it not working. I don't have any idea how to change it. Hope you all can help to solve it.</p>
  
  <p>This is my example <a href="https://stackblitz.com/edit/angular-material-pagination-server-side-pagination-hmxfgv" rel="nofollow noreferrer">demo</a> code.</p>
  
  <p>Thanks in advance.</p>