Prevent redirection through href="#" while using Angular Router

Question

I've been working on an Angular project which includes different libraries most importantly ngx-datatable.

Routing is working without any issues except for anchor tags where href="#" where the user is redirected to / even if not required.

All the solutions that I've found suggest removing # or the whole attribute itself but I just can't do that as it requires hacking all the libraries I'll be using.

Is there any way I can use a Router hook or something to stop navigation if the request URL is #?

Naga Sai A · Accepted Answer · 2019-09-04T14:43:21.497

3

To achieve expected result, use javascript:void(0) for href attribute instead of # (if you are able to change individually)

<a href="javascript:void(0);"></a>

Option 2: Generic solution to update all hrefs , override href attribute as mentioned in below answer Angular 2, handle anchor links with href='#'

@Directive({
  selector : '[href]'
})
export class MyLinkDirective {
  @Input() href: string;

  @HostListener('click', ['$event'])
  noop(event: MouseEvent) {
    if(this.href.length === 0 || this.href === '#') {
      event.preventDefault();
    }
  }
}

edited Sep 04 '19 at 14:43

answered Sep 04 '19 at 14:32

Naga Sai A

10,771
1
21
40

Directive solution is what I'd go for. This appears to be a generic solution. Thanks. – onepoordeveloper Sep 05 '19 at 07:05
This stops click events on the same element from firing. – toxaq May 30 '22 at 04:24

score 0 · Answer 2 · answered Sep 04 '19 at 15:10

OP, I'm assuming that's a dynamically generated element since it's through ngx-datatable, meaning you will have to query for that specific element then add an event listener to it that prevents the default action of the event.

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelector('a[title="Expand/Collapse Group"]')
      .addEventListener('click', this.onClick.bind(this));
}

onClick(event) {
  event.preventDefault();
}

Thanks but I'm looking for a generic solution as I can't search all the usages of href="#" within all the libraries I'm using or I'll be using. I'll go with the directive solution provided in another answer. — onepoordeveloper, Sep 05 '19 at 07:03

score 0 · Answer 3 · edited May 30 '22 at 04:45

I had a similar problem whilst migrating a large AngularJS app to Angular 12. It's a complicated enough job without having to restyle every broken anchor tag to a button (as should be done as a long term fix). As such, I created a temporary directive inspired by @naga-sai-a above.

import { Directive, ElementRef, Input } from '@angular/core'

// TODO replace all of these uses with actual buttons. This is a fallback 
// from AngularJs default functionality

@Directive({
  selector : '[href]'
})
export class HrefDirective {
  @Input() href: string;

  constructor (private el: ElementRef) {}

  ngOnInit () {
    if(this.href.length === 0 || this.href === '#') {
      this.el.nativeElement.removeAttribute('href')
      this.el.nativeElement.style.cssText = "pointer:cursor"
    }
  }
}

This simply removes the HREF attribute (which prevents navigation) and adds the cursor pointer. It's a hack but not as nasty as trying to stop event propagation.

Jens Alenius · Answer 4 · 2019-09-09T12:19:38.827

-1

Don't use an anchor link if you don't want to navigate. I guess that this is for collapse and expand. If you want your element to look as an anchor link, then just add css style to it. Your class name: datatable-icon-right indicates that your showing an icon. Use a div or i. you dont have to add tha bold tag around your text. Just add font-weight:bold in datatable-icon-right. Hope it helps

Updated

I had a look at the ngx-datatable project. I found this in the grouping example

<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <div style="padding-left:5px;">
              <a href="#"
                [class.datatable-icon-right]="!expanded"
                [class.datatable-icon-down]="expanded"
                title="Expand/Collapse Group"
                (click)="toggleExpandGroup(group)">
                <b>Age: {{ group.value[0].age }}</b>
              </a>
            </div>
          </ng-template>

You are free to add any placeholder for the expand element. Just add a div instead of anchor. If the style looks weird then just add an extra class to your div and style it as you want. ex:

.datatable-group-header .your-class{cursor:pointer...}

edited Sep 09 '19 at 12:19

answered Sep 04 '19 at 15:33

Jens Alenius

1,931
2
16
20

I understand that but I can't modify all the libraries I'm using or I'll be using in future. This isn't my code but the libraries. – onepoordeveloper Sep 05 '19 at 06:52
Is this code you have written or is code from within the library? – Jens Alenius Sep 05 '19 at 08:20
Copied from one of the ngx-datatable's example. Shared this code here as an example. – onepoordeveloper Sep 06 '19 at 10:25
I looks like you have copied the html DOM output. If the ngx-datatable generate a DOM with anchor links for expand collapse groups, you are either using it incorrect, or you should consider using another library. It is definite not correct use of html. Expand/Collapse should not be implemented with anchor elements because, as you already noticed, will tell the browser to start a navigation – Jens Alenius Sep 09 '19 at 07:00

Prevent redirection through href="#" while using Angular Router

4 Answers4