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

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>