How to disable routing to <a href="#" > in angular 8?

Question

I'm using local reference like this

<a class="btn-floating btn-large blue" href="#">button</a>

But Angular redirects me to some another link localhost:4200/#

Answer 1

just call preventDefault method of the click event

<a class="btn-floating btn-large blue" href="#" (click)="$event.preventDefault()">
button
</a>

or just remove the href attribute

<a class="btn-floating btn-large blue" >
button
</a>

you navigate in the page by using scrollIntoView method.

<a (click)="skils.scrollIntoView({behavior: 'smooth'})">Skils 🔽</a>
....
<div #skils>...</div>

demo 🚀