Ionic 6 Dynamic Data & Sort Function

I’m having an issue using a function to sort an array:

I’m using a cartService which holds all the product data like this

 public product: Product[] = [
    {
      id:0,
  class: 'large',
  link: '/bars/0/',
  title:'bar zero',
  web1:'',
  },
  {
      id:1,
  class: 'large',
  link: '/hotel/1/',
  title:'hotel one',
  web1:'',
  },
  {
      id:2,
  class: 'large',
  link: '/bar/2/',
  title:'bar two',
  web1:'',
  }
  ];

and then to call the products

getProducts(): Product[] {
    return this.product;

  }

All works well using this in the page which calls the component providing a list of products using a filter by id pipe

<app-bars *ngFor="let product of getProducts() | filterbyid:{loctype: 'bars'}" [product]="product"></app-bars>

When you click on the view button

<ion-button [routerLink]="'/view-bars/' + product.id"></ion-button>

It sends you to the product page.

I’m trying to get the data to sort by title alphabetically. When I try this

getProducts(): Product[] {
    this.product.sort((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0))
    return this.product;

  }

all the products display alphabetically but when you press the view button it takes you to a completely different product. The rendered html is showing the link to the product correctly.

Obviously the sort function is causing the issue. Does anyone know anyway of solving this issue?