In my Angular application I have a lot of buttons which navigate to a different location (navigation bar, etc.). As I have a single-page application (SPA) this is of course simulated by Angular. Currently I am using the [routerLink] directive for routing which works fine. Now I would like my buttons to behave more like real links, e.g. ctrl + righ click should open the link in a new tab and right clicking should show the context menu of a normal anchor link: But of course I still want the application to stay a SPA and not reload whenever a link is clicked. Is there a best practice for achieving this? I found the RouterLinkWithHref directive but I don't know if this has anything to do with it. A workaround which does the trick is setting both the routerLink and the href directive. <a routerLink="/" href="/"><button mat-stroked-button>Back to dashboard</button><a> Which adds the not-so-pretty link styling and feels very redundant. Of course this could be combined in a custom directive but I feel like the use case I am describing here is very common and should therefore have a clear solution. Is there a reason why it's not the default behavior of a routerLink to show the context action like it is a real link? And what is the best practice for transforming elements with a routerLink to elements that behave like real links (I would like to have all the router buttons, list-items etc. in my application to appear like normal links)? Continue reading...
