Passive Link in Angular 2 - a href equivalent

Question

In Angular 1 x I can do the following to create a link which does basically nothing    lt a href    gt My Link lt  a gt    But the same tag navigates to the app base in Angular 2  What is the equivalent of that in Angular 2   Edit  It looks like a bug in the Angular 2 Router and now there is an open issue on github about that   I am looking for an out of the box solution or a confirmation that there won t be any

User · Accepted Answer

If you have Angular 5 or above  just change    lt a href     click   passTheSalt    gt Click me lt  a gt    into   lt a  routerLink      click   passTheSalt    gt Click me lt  a gt    A link will be displayed with a hand icon when hovering over it and clicking it won t trigger any route   Note  If you want to keep the query parameters  you should set queryParamsHandling option to preserve    lt a  routerLink        queryParamsHandling  preserve      click   passTheSalt    gt Click me lt  a gt

User · Answer

You have prevent the default browser behaviour  But you don   t need to create a directive to accomplish that   It   s easy as the following example   my component html   lt a href     click   goToPage pageIndex   event   gt Link lt  a gt    my component ts  goToPage pageIndex  event      event preventDefault      console log pageIndex

User · Answer

There are ways of doing it with angular2  but I strongly disagree this is a bug  I m not familiarized with angular1  but this seems like a really wrong behavior even though as you claim is useful in some cases  but clearly this should not be the default behavior of any framework    Disagreements aside you can write a simple directive that grabs all your links and check for href s content and if the length of it it s 0 you execute preventDefault    here s a little example    Directive     selector     href      host           click      preventDefault  event          class MyInhertLink      Input   href    preventDefault event        if this href length    0  event preventDefault            You can make it to work across your application by adding this directive in PLATFORM DIRECTIVES  bootstrap App   provide PLATFORM DIRECTIVES   useValue  MyInhertLink  multi  true        Here s a plnkr with an example working

User · Answer

That will be same  it doesn t have anything related to angular2  It is simple html tag   Basically a anchor  tag will be rendered by HTML parser   Edit  You can disable that href by having javascript void 0  on it so nothing will happen on it   But its hack   I know Angular 1 provided this functionality out of the box which isn t seems correct to me now     lt a href  javascript void 0    gt Test lt  a gt    Plunkr    Other way around could be using  routerLink directive with passing    value which will eventually generate blank href      lt a routerLink     click   passTheSalt    gt Click me lt  a gt

User · Answer

I wonder why no one is suggesting routerLink and routerLinkActive  Angular 7    lt a  routerLink       resources     routerLinkActive  currentUrl    resources   gt    I removed the href and now using this  When using href  it was going to the base url or reloading the same route again

User · Answer

simeyla solution    lt a href      click   foo    false  gt   lt a href     click   false  gt

User · Answer

Here are some ways to do it     lt a href     click   false  gt Click Me lt  a gt   lt a style  cursor  pointer   gt Click Me lt  a gt   lt a href  javascript void 0   gt Click Me lt  a gt

User · Answer

Updated for Angular 5  import   Directive  HostListener  Input   from   angular core     Directive        tslint disable-next-line directive-selector   selector     href      export class HrefDirective      Input   public href  string   undefined      HostListener  click      event    public onClick event  Event   void       if   this href    this href             this href  amp  amp  this href length     0           event preventDefault

User · Answer

I am using this workaround with css        Angular 2 link without href      a not  href        cursor  pointer       -webkit-user-select  none       -moz-user-select  none       user-select  none     html   lt a  routerLink      gt My link lt  a gt    Hope this helps

User · Answer

you need to prevent event s default behaviour as follows  In html  lt a href  quot  quot   click   quot view  event  quot  gt view lt  a gt   In ts file view event Event    event preventDefault       remaining code goes here

User · Answer

I have 4 solutions for dummy anchor tag        1   lt a style  cursor  pointer   gt  lt  a gt      2   lt a href  javascript void 0    gt  lt  a gt      3   lt a href  current screen path  gt  lt  a gt    4 If you are using bootstrap    lt button class  btn btn-link p-0  type  button  style  cursor  pointer  click   doSomething    gt MY Link lt  button gt

User · Answer

An achor should navigate to something  so I guess the behaviour is correct when it routes  If you need it to toggle something on the page it s more like a button  I use bootstrap so I can use this     lt button type  button  class  btn btn-link   click   doSomething    gt My Link lt  button gt

User · Answer

A really simple solution is not to use an A tag - use a span instead    lt span class  link   click   doSomething    gt Click here lt  span gt   span link     color  blue    cursor  pointer    text-decoration  underline

User · Answer

Updated for Angular2 RC4   import  HostListener  Directive  Input  from   angular core     Directive       selector    href      export class PreventDefaultLinkDirective         Input   href       HostListener  click      event    onClick event   this preventDefault event         private preventDefault event            if  this href length     0    this href                        event preventDefault                        Using  bootstrap App   provide PLATFORM DIRECTIVES   useValue  PreventDefaultLinkDirective  multi  true

User · Answer

Here is a simple way     lt div  click    event preventDefault    gt               lt a href     gt  lt  a gt      lt  div gt    capture the bubbling event and shoot it down

User · Answer

In my case deleting href attribute solve problem as long there is a click function assign to a

[angular] Passive Link in Angular 2 - <a href=""> equivalent

Examples related to angular

Examples related to routing

Examples related to angular2-routing

Examples related to angular-router