diff --git a/resources/angular/src/app/inertia/entities.ts b/resources/angular/src/app/inertia/entities.ts index b387eb9..b1b897a 100644 --- a/resources/angular/src/app/inertia/entities.ts +++ b/resources/angular/src/app/inertia/entities.ts @@ -1,6 +1,6 @@ import { InjectionToken, Type } from '@angular/core'; -export const INERTIA_PAGES = new InjectionToken('INERTIA_PAGES'); +export const INERTIA_PAGES = new InjectionToken('INERTIA_PAGES'); export enum InertiaMetadata { component = 'inertia:component' diff --git a/resources/angular/src/app/inertia/inertia-link.directive.ts b/resources/angular/src/app/inertia/inertia-link.directive.ts index 13e5592..d72ebbf 100644 --- a/resources/angular/src/app/inertia/inertia-link.directive.ts +++ b/resources/angular/src/app/inertia/inertia-link.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostListener, Input } from '@angular/core'; +import { Directive, HostListener, Input, ElementRef } from '@angular/core'; import { router } from "@inertiajs/core"; @Directive({ @@ -8,7 +8,29 @@ export class InertiaLinkDirective { @Input('inertiaLink') href = ''; - @HostListener('click') onClick() { - router.get(this.href); + constructor(private el: ElementRef) {} + + @HostListener('click', ['$event']) + onClick(event: MouseEvent) { + // Only handle primary (usually left) button + if (event.button !== 0) { + return; + } + + // Respect modifier keys so users can open in new tab/window + if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { + return; + } + + // If no explicit href input, try to read from host element (e.g. ) + const href = this.href || (this.el.nativeElement.getAttribute && this.el.nativeElement.getAttribute('href')) || ''; + + if (!href) { + return; + } + + // Prevent native navigation and use Inertia router + event.preventDefault(); + router.get(href); } } diff --git a/resources/angular/src/main.ts b/resources/angular/src/main.ts index c58dc05..cfc64b4 100644 --- a/resources/angular/src/main.ts +++ b/resources/angular/src/main.ts @@ -1,3 +1,6 @@ +// Ensure reflect-metadata is loaded before decorators are evaluated. +import 'reflect-metadata'; + import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module';