35

This is asking about a best practice. Is it a good practice to use routerLink and (click) in same button. 

<button routerLink="/link" (click)="back()">

Because we can put the router navigation logic in the back() method, like below, 

this.router.navigate(['/link']);

All I found regarding this is, this article which was not talking about the best practice to follow. If one is better than the other, can you explain the reason.

dilantha111
  • 1,388
  • 1
  • 17
  • 19

4 Answers4

53

Following are few examples how you can play around with routerLink and click ,

Hope this will help :

-> If you want to redirect to certain pages you can always use this :

<a [routerLink]="['/my-book-listing']"> My Books</a>

-> If you want to redirect to a page but want to send some paramater such as ID then use :

<a [routerLink]="['/my-book-details','3']">Book number 3</a>

-> If there is a case in which you need to send Query params to route then you can use

<a [routerLink]="['/search-this']" [queryParams]="{text:'sam',category:'social'}">Go Search</a>

-> If there is a need of code logic before navigating to the page then you need to use

<button (click)="createBook()">Create Book</button>

createBook(bookData){
   // Create Book logic
   this.router.navigate(['/my-book-listing']);
}

-> You can also use as follows but not a good practice unless you are calling function to destroy variables or save page leaving data

<button (click)="showLoader()" [routerLink]="['/my-book-listing']">Create Book</button>

showLoader(){
  // showLoader logic
}
Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
  • 1
    Thanks for the answer @Sangwin Gawande. Can you explain more why it's not a good practice ? using both ? I also has the feeling that it's not a good practice, which made me ask the question regarding this. – dilantha111 May 11 '18 at 09:33
  • You can check out this answer : https://stackoverflow.com/questions/14867558/html-tag-a-want-to-add-both-href-and-onclick-working?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Sangwin Gawande May 11 '18 at 11:51
9

If you need logic to occur before you go to a route you can import the Router Module and use it as such.

import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router';

@Component({
   selector: 'app-foo',
   templateUrl: './foo.component.html',
   styleUrls: ['./foo.component.sass']
})
export class FooComponent implements OnInit{
   constructor( private router: Router ) { }
   ngOnInit() {}

   action(){
      ...Your Logic...
      this.router.navigate([ '/bar' ])
   }
}

<div>
   <button (click)='action()' >Go To Bar</button>
</div>
Aundre
  • 383
  • 4
  • 7
5

I'm unsure of the best practice but I would say that it is fine to use routerLink and (click) in the same button as long as you do not interfere with the navigation.

Manually navigation via this.router.navigate(['/link']); is sub-optimal since routerLink handles things like 'open in new tab' whereas implementing your own using a (click) handler is not desirable.

Joshua Chan
  • 1,797
  • 8
  • 16
  • you have a good point. So it's not possible to open in a new tab when using the this.router.navigate(['/link']); ? – dilantha111 May 11 '18 at 09:38
  • I would think that this.router.navigate only changes the url of the current page and instantiate the proper component for the given url. If you would check out the repository in [github](https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts), you can see the inner workings of the directive, for example, it checks the keyboard event for ctrl to open links in new tab. – Joshua Chan May 11 '18 at 09:43
  • @dilantha For the record, control-clicking to open in new tab doesn't seem to work with a routerLink either. – Phasma Felis Mar 20 '20 at 21:37
  • That is correct, what `routerLink` does is it would _not_ navigate when ctrl,shift or [meta](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey) key is pressed. In which case if the directive is used within an anchor tag, it would allow your browser to 'open links in new tabs/window'. – Joshua Chan Mar 22 '20 at 04:39
3

I would go for routerLink when I simply have to navigate for example, to /link

But if there is some logic which needs to be performed before navigating then I would go for click()

Also there are cases when you have to pass in query parameters with routing navigation , then also I would prefer to use click()

BeeBee8
  • 2,944
  • 1
  • 27
  • 39
  • 1
    you can pass the query params in routerLink as well right ? See @Sangwin Gawande 's answer. – dilantha111 May 11 '18 at 09:35
  • 1
    @dilantha111 Yes, I know, I said I would 'prefer', its because in my case most of the times when query params are involved there are some complex logic involved, such as evaluating the query parameter value through an internal function and then assigning it. Also when `*ngFor` loops are involved it gets more complex. So it will not be always be straightforward as `[queryParams]="{text:'sam',category:'social'}"` , so you can make decision based on that. – BeeBee8 May 11 '18 at 10:02