Angular 2, handle anchor links with href='#' -

when clicking anchor link has href='#', angular router path

{ path: '', component: nologincomponent, pathmatch: 'full' } 

is matched, how should handle these anchor links anchor href='#' stays on same page, i.e nothing.

example anchor tag

<a class="title-logo" href="#"><img src="/content/images/image1.png"></a>

one more point consider, have used <base href="/" /> in layout page on refresh angular stays on current page , resources "/" not inside current component.

there few options:

option 1:

override href attribute directive:

@directive({   selector : '[href]',   host : {     '(click)' : 'donothing($event)'   } }) export class mylinkdirective {   @input() href: string;    donothing(event) {     if(this.href.length === 0 || this.href === '#') {       event.preventdefault();     }   } } 

source

personally, solution because global , angular. here's plunker.

---

option 2

you can use css , ditch href attribute together:

a {   cursor: pointer;   user-select: none; } 

then inactive links be:

<a class="title-logo"><img src="/content/images/image1.png"></a> 

---

option 3

css pointer-events:

a.noop {    pointer-events: none; } 

usage

<a class="title-logo noop" href="#"><img src="/content/images/image1.png"></a> 

pointer-events may cause trouble on (especially older) browsers, if care them. can see compatibility list here.