Pagination is not working properly in Angular material

Question

In side my grid view the pagination is not working properly. I am attaching my view below.

I am explaining my code below.

componet file:

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChange($event)">

<mat-paginator [pageSizeOptions]="[1,10, 25, 50, 100]" [pageSize]="pageSize" [pageIndex]="pageIndex" [length]="totalCount" (page)="pageChange($event)" showFirstLastButtons></mat-paginator>
</table>

.ts file:

@ViewChild(MatPaginator,{static: false}) 
paginator: MatPaginator;
@ViewChild(MatSort,{static: false}) 
sort: MatSort;
dataSource = new  MatTableDataSource<Stores>([]);
pageSize    = 1;
pageIndex   = 1;
totalCount        : number;
ngOnInit() {

    this.dataSource.paginator = this.paginator;

    this.getStores(1, 10);
  }
getStores(page, limit) {
    let sortBy  = this.direction ? this.direction == 'asc' ? this.sortName : '-' + this.sortName : 'updatedAt';
    let filters = {
      "page"        : page,
      "limit"       : limit,
      "sortby"      : sortBy,
      "searchvalue" : this.searchValue || ''
    }
    this.api.getStores(filters).subscribe(x => {
      console.log('xx',x);
      this.data                 = x['data'];
      this.storeData         = this.data;
      this.dataSource.data      = this.storeData;
      this.dataSource.sort      = this.sort;
      // this.paginator.pageIndex  = this.pageIndex - 1;
      this.allchecked           = false;


    });
  }

pageChange(event) {
    this.pageIndex = this.paginator.pageIndex + 1;
    this.getStores(this.paginator.pageIndex + 1, this.paginator.pageSize);
  }

Here I have total 2 record I am fetching from database and per page I have selected 1 but here all record are showing and the pagination is not coming. My requirement is if the per page number is less than the total record fetch then the pagination should work as expected.