How to redirect to a new page in Angular 4 through button click?

If you are using a link (<a>), you only need the routerLink directive/parameter:

<a class="btn" routerLink="/votes">Check votes</a>

If you are using a button (<button>), you need a (click) event:

<button class="btn" (click)="goToVotes()">Check votes</button>

It is preferable to create a function/method in this case, since it is a good practice to keep private parameters in your component's constructor, i.e. don't use router.navigate() directly on your HTML (avoids 'router' warnings due to using a private member of the component).

import { Component } from '@angular/core';
import { Router } from '@angular/router';
// component details here...
export class MyComponent  {
  constructor(private router: Router){ }

  goToVotes($myParam: string = ''): void {
    const navigationDetails: string[] = ['/votes'];
    if($myParam.length) {
      navigationDetails.push($myParam);
    }
    this.router.navigate(navigationDetails);
  }
}

The goToVotes method above will also add a second value to the navigate's array if its argument is not empty, and thus:

<button class="btn" (click)="goToVotes('ca')">Go vote</button>

Would redirect to /votes/ca.

Try this

<button (click)="router.navigate(['/master']);">
   <span>Go to master Page</span>
</button>

OR

in your home.html

<button (click)="goToPage('master')">
   <span>Go to master Page</span>
</button>

and in your home component

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

constructor(private router: Router){
}

function goToPage(pageName:string){
  this.router.navigate([`${pageName}`]);
}