title: Pagination index Number in Angular 5
body: <p>I am working with a project Using WordPress API in Angular 5. And I used material grid as well as filtering and pagination. I am facing problem of indexing, like i have total 100 entries but i want to show 50 in single page. When I clicked next the next 50 entries shows in grid but index number again start from 1 to 50 instead of 51 to 100.
  How to get last page index number and concatenate with next.</p>
  
  <blockquote>
    <p>Filtering</p>
  </blockquote>
  
  <pre><code>&lt;div class="example-header"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput type="text" placeholder="Component" aria-label="Number" [matAutocomplete]="autocom" #component&gt;
      &lt;mat-autocomplete #autocom="matAutocomplete" (optionSelected)="dropDown($event.option.value,region.value,sector.value,stats.value,page)"&gt;
        &lt;mat-option [value]="" style="font-size: 14px;"&gt;
          ALL
        &lt;/mat-option&gt;
        &lt;mat-option *ngFor="let option of options" [value]="option" style="font-size: 14px;"&gt;
          {{ option }}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput type="text" placeholder="Region" aria-label="Number" [matAutocomplete]="autoreg" #region&gt;
      &lt;mat-autocomplete #autoreg="matAutocomplete" (optionSelected)="dropDown(component.value,$event.option.value,sector.value,stats.value,page)"&gt;
        &lt;mat-option [value]="" style="font-size: 14px;"&gt;
          ALL
        &lt;/mat-option&gt;
        &lt;mat-option *ngFor="let option of regions" [value]="option" style="font-size: 14px;"&gt;
          {{ option }}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  &lt;div&gt;
  </code></pre>
  
  <blockquote>
    <p>Pagination</p>
  </blockquote>
  
  <pre><code>&lt;mat-paginator #pagination [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = dropDown(component.value,region.value,sector.value,stats.value,$event)"
      #page&gt;
    &lt;/mat-paginator&gt;
  </code></pre>
  
  <blockquote>
    <p>component.ts</p>
  </blockquote>
  
  <pre><code>pageEvent: PageEvent;
  
    totalPageSize = 1;
    length: number;
    pageIndex: number = 1;
    pageSize: number = 100;
    pageSizeOptions: number[] = [10, 25, 50, 100];
  
  loadData() {
      this.spinnerService.show();
      this.subscription = this.grantsearchservice.getStarterApi(this.component, this.region, this.sector, this.stats, this.pageIndex, this.pageSize)
        .subscribe(
          (grantsearch: any) =&gt; {
            this.grantsearchs = grantsearch.body;
            this.dataSource = new MatTableDataSource(this.grantsearchs);
            this.totalPageSize = grantsearch.headers.get('X-WP-TotalPages');
            this.setPagination(grantsearch.headers.get('x-wp-total'), this.pageIndex, this.pageSize);
            this.spinnerService.hide();
          }
        );
    }
  </code></pre>