Angular router link and click event trigger

Question

I have an angular component that for the purpose looks like this:

<div click="onClick()">
<a [routerLink]="url">
</a>
</div>

<a> occupies 100% of the div, so when I am clicking the div or anchor, I want to trigger onClick() event plus navigate.

Problem is sometimes the navigation occurs first and the click event is lost. Since I want to on hover display the url link where I'm navigating too, I think there isn't other solution besides using routerLink is there?

Basically to show this:

And if not, how could I make sure that despite navigating, I always trigger onClick()?

i am making a stackblitz example for you , one moment please — Dolev Dublon, Dec 16 '20 at 18:22
hey the stackblitz example doesnt work properly because stackblitz work diffrent than the local programming envierment so i will mention the steps for you to take in order to make stuff work for you ! — Dolev Dublon, Dec 16 '20 at 18:54

score 3 · Answer 1 · answered Dec 16 '20 at 18:25

3

You can inject the Router service inside your Component Controller and then set the navigation inside your onClick function.

constructor(private readonly router: Router) { }

and then:

onClick() {
     this.router.navigate(['url']);
    ...
}

answered Dec 16 '20 at 18:25

Umberto

579
2
10

2

but that way I will loose the on hover url I think that browser shows – heisenberg Dec 16 '20 at 18:26

Dolev Dublon · Answer 2 · 2020-12-16T19:01:20.943

what's up!

a couple of words before we get to the actual answer just to make sure you know how to work with router module

const routes: Routes = [
  { path: "", pathMatch: "full", redirectTo: "home" },
  { path: "home", component: HomepageComponent },
  { path: "register", component: RegisterComponent },
  { path: "buyingmainpage", component: BuyingmainpageComponent , canActivate : [AuthGuard] },
  { path: "checkoutmainpage", component: CheckoutmainpageComponent , canActivate : [AuthGuard] },
  { path: "checkoutsuccess", component: CheckoutsuccessComponent , canActivate : [AuthGuard] },
  { path: "**", component: Eror404Component },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

tell me if this is familiar concept you are familiar with ?

the first step is to include the path of the url you want in the routes like the code above

the answer

the way to make this work in angular is by using Router

first you import it in the beginning of the code

import { Router } from '@angular/router';

then on the constructor function you declare it like this

  constructor(
    private router: Router,
    ) {}

then you can run the onClick function you wanted and use the function

router.navigateByUrl("/abc")

with a string inside it to navigate to the url you want :)

onClick(){
this.router.navigateByUrl("/checkoutmainpage")
}

if you want a video call i can help you ,

feel free to contact me on whats app or email , whats app will be quiker

+972505884960 / dolev146@gmail.com

I'm familiar with that, but I want to the url popover that routerlink adds. Using router it won't show up. — heisenberg, Dec 16 '20 at 19:00

score 0 · Answer 3 · answered Jan 19 '23 at 18:49

The Click event will occur before the url href fires (routerLink). What you want to do is make sure one happens and not the other by preventing the event to bubble up. We do the same in our app to maintain browser "history" on visited links, but let the click event actually do the routing, as there is some additional setup we need to do prior to navigating.

<div>
  <!-- ie: <a href="the-path-to-my-route"></a> -->
  <a click="onClick(); $event.preventDefault()" [routerLink]="url">
  </a>
</div>

The above will case the click event to be handled, and the actual element to display an anchor href with full url.

then in your ts

onClick() {
  this._router.navigate([url]);
}

Just make sure your route url path is valid.

Angular router link and click event trigger

3 Answers3