Using routerLink and (click) in same button

Question

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.

Answer 1

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
}

Answer 2

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.

Answer 3

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>

Answer 4

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()