Open product detail in a new tab with right-click option

I'm trying to implement a card component in Angular that shows product information. When I right-click on a card, I want to see the option to open the detail page in a new tab. However, currently, when I open it in a new tab, it just goes to the home page (/) instead of the detail page.strong text
​

<div *ngIf="!error && !isEmpty" class="flex flex-wrap items-stretch w-full h-full justify-center lg:justify-start gap-4">
<ng-container *ngFor="let item of allProductsArray">
<div class="relative flex-none w-[320px] h-auto p-2 shadow-lg rounded-md">
<div class="relative mt-4 overflow-hidden w-full aspect-square h-[320px] flex justify-center items-center">
<img [src]="item.image" loading="lazy" alt="ui/ux review check"
class="w-full h-full object-contain cursor-pointer"
(click)="item.type === 'product' ? showDetail(item.product_id) : showKitDetail(item.product_id)">
<!-- Discount Sticker -->
<div *ngIf="item.discount > 0" class="absolute top-0 right-0 bg-red text-white text-xs font-bold px-2 py-1 rounded-bl-md z-10">
-{{ item.discount }}%
</div>
</div>
<div class="p-6 flex flex-col gap-4">
<div class="block">
<div class="flex justify-between gap-2">
<h5 class="text-xl font-medium leading-snug text-blue-gray-900 cursor-pointer"
(click)="item.type === 'product' ? showDetail(item.product_id) : showKitDetail(item.product_id)">
{{ getProductName(item) }}
</h5>
<div class="px-1 cursor-pointer" (click)="addWishList(item.product_id, item.type)">
<!-- SVG icon here -->
</div>
</div>
<div class="mt-3 w-full">
<p *ngIf="item.price === item.new_price">{{ 'price' | translate }} {{ item.price }}</p>
<p *ngIf="item.price !== item.new_price">
{{ 'price' | translate }} <span class="line-through decoration-red decoration-2 px-2">{{ item.price }}</span> {{ item.new_price }}
</p>
</div>
</div>
</div>
</div>
</ng-container>
</div>
//
showDetail(id: any) {
console.log(id);
this.service.productDetail_id = id;
localStorage.setItem('productId', this.service.productDetail_id);
this.router.navigate(['/detail']);
}

What I Want to Achieve:

When I right-click on a product card, I want to open the detail page in a new tab. I’ve set up the route to navigate to /detail, but it’s not working when opening in a new tab. Instead, it defaults to the homepage (/).
​

const routes: Routes = [
{ path: 'detail', component: DetailComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
exports: [RouterModule],
})
export class AppRoutingModule {}

Continue reading...