How to update Previous and Next links after deletion of the rows in Angular Table?

I have a requirement to delete row elements on checkBox enable on the row elements and click of Delete button. On Clicking the Delete the button, I'm able to delete the Items in the table.But unable to update the Prev and Next links appropriately as per the page numbers.

Scenario:
Row Id    Row Value

1           Row1
2           Row2
3           Row3

Showing 1-3 of 9 Next //Since it is in Page Number 1

Row Id    Row Value

4           Row4
5           Row5
6           Row6

Showing 4-6 of 9 Prev Next // Since it is in Page Number 2

Row Id    Row Value

7          Row7
8          Row8
9          Row9

Showing 7-9 of 9 Prev  // Since it is in the last page, Nex link is disabled.

I'm trying to a achieve a scenario like if user selects the 7,8,9 and delete them, then 
It should display

Row Id    Row Value

4           Row4
5           Row5
6           Row6

Showing 4-6 of 6 Prev

Html

<button type = "button" (click)="deleteSelectedItems()">Delete Items</button>
<table>
    <thead>
        <th>Row Id</th>
        <th>Row Value</th>
    </thead>
    <tbody>
        <tr *ngFor = "let row of paginatedMessages; let i = index;">
            <td><input type="checkbox" [(ngModel)] = "row.isSelected" (change) = "onCheck($event, row.id, i)" /></td>
            <td>{{row?.id}}</td>
            <td>{{row?.rowValue}}</td>
        </tr>
    </tbody>
</table>
<span> 
    {{paginatedString}}
    <a class = "link" (click) = "showPrevItems()" *ngIf = "showPreviousBtn">Prev</a>
    <a class = "link" (click) = "showNextItems()" *ngIf = "showNextBtn">Next</a>
</span>

ts

import { Component, OnInit } from '@angular/core';

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

  showPreviousBtn : boolean = false;
  showNextBtn: boolean = false;
  paginatedMessages: any [] = [];
  allMessages: any [] = [];
  noOfMsgsPerPage = 5;
  pageNumber = 1;
  totalMessageCount: number = 0;
  paginatedString: string = '';
  checkBoxes: any[] = [];
  deletedMessageIds: any[] = []

  tableRows = [
    { id : "1", rowValue : "Row 1", isSelected : false },
    { id : "2", rowValue : "Row 2", isSelected : false},
    { id : "3", rowValue : "Row 3", isSelected : false},
    { id : "4", rowValue : "Row 4", isSelected : false},
    { id : "5", rowValue : "Row 5", isSelected : false},
    { id : "6", rowValue : "Row 6", isSelected : false},
    { id : "7", rowValue : "Row 7", isSelected : false},
    { id : "8", rowValue : "Row 8", isSelected : false},
    { id : "9", rowValue : "Row 9", isSelected : false},
    { id : "10", rowValue : "Row 10", isSelected : false},
    { id : "11", rowValue : "Row 11", isSelected : false},
    { id : "12", rowValue : "Row 12", isSelected : false},
    { id : "13", rowValue : "Row 13", isSelected : false},
    { id : "14", rowValue : "Row 14", isSelected : false},
    { id : "15", rowValue : "Row 15", isSelected : false},
    { id : "16", rowValue : "Row 16", isSelected : false},
    { id : "17", rowValue : "Row 17", isSelected : false},
    { id : "18", rowValue : "Row 18", isSelected : false},
    { id : "19", rowValue : "Row 19", isSelected : false},
    { id : "20", rowValue : "Row 20", isSelected : false},
]



  constructor() { }

  ngOnInit(): void {
    this.getMessagesData()
  }

  getMessagesData() {
    this.allMessages = [...this.tableRows];
    this.paginatedMessages = [...this.allMessages.slice(0, this.noOfMsgsPerPage)]
    this.totalMessageCount = this.allMessages.length;
    this.loadMessages();
    this.showPreviousBtn = false;
    this.showNextBtn = true;
    this.checkBoxes = new Array(this.allMessages.length);
    this.checkBoxes.fill(false)
  }

  loadMessages() {
    let start = (this.pageNumber - 1) * this.noOfMsgsPerPage + 1;
    let end = Math.min(start + this.noOfMsgsPerPage - 1, this.totalMessageCount) 
    this.paginatedMessages = this.allMessages.slice(start - 1, end);
    this.paginatedString = `Showing ${start} - ${end} of ${this.totalMessageCount}`
  }

  showNextItems() {
    this.paginatedMessages = [];
    this.pageNumber = this.pageNumber + 1;
    this.showPreviousBtn = true;
    if(this.pageNumber == this.calculatePagesCount(this.noOfMsgsPerPage, this.totalMessageCount)) {
      this.showNextBtn = false;
    }
    this.loadMessages();
  }
  
  calculatePagesCount = (pageSize: any, totalCount: any) => {
    return totalCount < pageSize ? 1 : Math.ceil(totalCount / pageSize);
  };

  showPrevItems() {
    this.paginatedMessages = [];
    this.showNextBtn = true;
    this.pageNumber = this.pageNumber - 1;
    if(this.pageNumber <= 1) {
      this.showPreviousBtn = false;
    }

    this.loadMessages();
  }

  onCheck(event:any, row: any , i:any) {
    console.log("Event :"+event+"i :"+i+ "Row :"+row);
    this.checkBoxes[i] = event.target.checked;
  }

  deleteSelectedItems() {
    this.deletedMessageIds = [];
    for (let i = this.checkBoxes.length-1; i >= 0; i--) {
      // If selected, then delete that row.
      if (this.checkBoxes[i]) {
       let arr = this.paginatedMessages.splice(i, 1);
       arr.forEach(i => {
        this.deletedMessageIds.push(i.id)
       })
       console.log("Deleted Message Ids", this.deletedMessageIds)
      }
    }

    this.deletedMessageIds.forEach(item => {
      let index = this.allMessages.findIndex(x => x.id === item);
      if(index !== -1) {
        this.allMessages.splice(index, 1);
      }
    })
    this.totalMessageCount = this.allMessages.length;
    console.log("All Message", this.allMessages);

    let start = (this.pageNumber - 1) * this.noOfMsgsPerPage + 1;
    let end = Math.min(start + this.noOfMsgsPerPage - 1, this.totalMessageCount);

    this.paginatedMessages = this.allMessages.slice(start - 1, end);
    this.paginatedString = `Showing ${start} - ${end} of ${this.totalMessageCount}`
    
  }
}

This here is, when I delete the elements in the last page, start and end is not update appropriately

Result:

Row Id  Row Value


Showing 16 - 15 of 15 Prev

Can anyone please help in updating the Prev and Next (enable and disable) if I delete the items?

Adding the Demo StackBlitz

Thanks in advance !!