I am trying to use MatPaginator the paginator is showing but the all the rows are showing in the single page

Question

I am a newbie to angular I am trying to use paginator on a table but all the rows are being shown together and the pagination option is not working. I am not sure what I am doing wrong please guide me. Should I add mat-table tag for it or is normal table tag enough for this to work. I am literally new to this and dont know what more information I can give you

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponent implements OnInit {

 

  constructor(private service : SharedService) { }

  PatientList : any = [];
  ModalTitle:any;
  ActivateAddEditDepComp:boolean=false;
  ptnt:any;

  PatientIdFilter:string="";
  PatientNameFilter:string="";
  PatientListWithoutFilter:any=[];

  dataSource : any; 
  @ViewChild(MatPaginator,{static:true}) paginator: any;


  ngOnInit(): void {
    this.refreshPatientList();
  }


  refreshPatientList(){
    this.service.getPatientList().subscribe(
      data=>{this.PatientList=data;
        this.PatientListWithoutFilter=data; 
        this.dataSource = new MatTableDataSource(this.PatientList);    
        this.dataSource.paginator = this.paginator;
      })
      
  }

  addClick(){
    this.ptnt = {
      Pt_Id:0,
      Pt_Name:'',
      Pt_Age:0,
      Department:'',
      Docname:'',
      Pt_Email:'',
      Pt_Mob:''
    }
    this.ModalTitle="Add Patient";
    this.ActivateAddEditDepComp = true;
  }

  editClick(item: any){
    this.ptnt=item;
    this.ModalTitle="Edit Patient"
    this.ActivateAddEditDepComp = true;
  }

  deleteClick(item: any){
    if(confirm('Are you sure??')){
      this.service.deletePatient(item.Pt_Id).subscribe(data=>{
        alert(data.toString());
        this.refreshPatientList();
      })
    }
  }
  
  closeClick(){
    this.ActivateAddEditDepComp=false;
    this.refreshPatientList();
  }

}

HTML table code

<table class="table table-striped">
    <thead>
        <tr>
            <th>Patient Id</th>
            <th>Patient Name</th>
            <th>Patient Age</th>
            <th>Department</th>
            <th>Doctor Name</th>
            <th>Patient Email</th>
            <th>Patient Mobile</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let dataItem of PatientList">
            <td>{{dataItem.Pt_Id}}</td>
            <td>{{dataItem.Pt_Name}}</td>
            <td>{{dataItem.Pt_Age}}</td>
            <td>{{dataItem.Department}}</td>
            <td>{{dataItem.Docname}}</td>
            <td>{{dataItem.Pt_Email}}</td>
            <td>{{dataItem.Pt_Mob}}</td>
            <td>
                <button type="button" class="btn btn-light mr-1"    
                data-toggle="modal" data-target="#exampleModal"
                (click)="editClick(dataItem)">
                Edit</button>
                <button type="button" class="btn btn-light mr-1"
                (click)="deleteClick(dataItem)">
                    Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<mat-paginator [length]="1000"
              [pageSize]="5"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Answer 1

You need to apply your table as matTable so that matPaginator works to paginate the table.

show.component.html

<table mat-table class="table" matSort aria-label="Elements" [dataSource]="this.dataSource">

    <ng-container matColumnDef="Pt_Id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Id</th>
        <td mat-cell *matCellDef="let row">{{row.Pt_Id}}</td>
    </ng-container>

    <ng-container matColumnDef="Pt_Name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Name</th>
        <td mat-cell *matCellDef="let row">{{row.Pt_Name}}</td>
    </ng-container>

    <ng-container matColumnDef="Pt_Age">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Age</th>
        <td mat-cell *matCellDef="let row">{{row.Pt_Age}}</td>
    </ng-container>

    <ng-container matColumnDef="Department">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Department</th>
        <td mat-cell *matCellDef="let row">{{row.Department}}</td>
    </ng-container>

    <ng-container matColumnDef="Docname">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Doctor Name</th>
        <td mat-cell *matCellDef="let row">{{row.Docname}}</td>
    </ng-container>

    <ng-container matColumnDef="Pt_Email">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Email</th>
        <td mat-cell *matCellDef="let row">{{row.Pt_Email}}</td>
    </ng-container>

    <ng-container matColumnDef="Pt_Mob">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Mobile</th>
        <td mat-cell *matCellDef="let row">{{row.Pt_Mob}}</td>
    </ng-container>

    <ng-container matColumnDef="Options">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Options</th>
        <td mat-cell *matCellDef="let row">
            <button type="button" class="btn btn-light mr-1"
                data-toggle="modal" data-target="#exampleModal"
                (click)="editClick(row)">
                Edit</button>
            <button type="button" class="btn btn-light mr-1"
                (click)="deleteClick(row)">
                    Delete</button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [length]="1000" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

show.component.ts

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponent implements OnInit {
  
  ...
  
  displayedColumns = [
    'Pt_Id',
    'Pt_Name',
    'Pt_Age',
    'Department',
    'Docname',
    'Pt_Email',
    'Pt_Mob',
    'Options'
  ];

  ...
}

show.component.scss

.mat-row:nth-child(even){
    background-color: white;
}
        
.mat-row:nth-child(odd){
    background-color: gray;
}

Sample solution on StackBlitz