Sometimes is more 'elegant' to use an linke (href) as button instead of a button, even if we don't want actually to navigate away from the page. But even with no URL in the href element the page 'refreshes'. This is how to avoid this.
If the click-handler function returns false value, then this stops propagation of the click further.
HTML Template
<a href (click)="clickMe()">Click Me!</a>
Component code
public clickMe(): boolean {
console.log ('I will do something with the click');
return false; // returning false will stop click event from propagating
}