Attaching click to anchor tag in angular

Question

I am trying to attach click event to anchor tags  coming from ajax  and block the default redirection  How can I do it in angular      lt ul gt       lt li gt  lt a href   abc  gt  lt p gt abc lt  p gt  lt  a gt  lt  li gt       lt li gt  lt a href   abc1  gt  lt p gt abc1 lt  p gt  lt  a gt  lt  li gt       lt li gt  lt a href   abc2  gt  lt p gt abc2 lt  p gt  lt  a gt  lt  li gt       lt li gt  lt a href   abc3  gt  lt p gt abc3 lt  p gt  lt  a gt  lt  li gt   lt  ul gt    In ts file    constructor elementRef  ElementRef  renderer  Renderer         this listenFunc   renderer listen elementRef nativeElement   click    event    gt            event preventDefault            let target   event target    event srcElement    event currentTarget          console log target                 This will attach event to all elements  how can I limit this to anchor tag only    All helps appreciated

User · Answer

I was able to implement this successfully   lt a  routerLink      login    gt abc lt  a gt

User · Answer

You can use routerLink  which is an alternative of href for angular 2   with click event as below to prevent from page reloading  lt a  routerLink   quot  quot   click   quot onGoToPage2   quot  gt Go to page lt  a gt

User · Answer

I have examined all the above answer s  We just need to implement two things to work it as expected  Step - 1  Add the  click  event in the anchor tag in the HTML page and remove the href  quot   quot  as its explicitly for navigating to external links  Instead use routerLink    quot   quot  which helps in navigating views   lt ul gt     lt li gt  lt a routerLink  quot  quot   click   quot hitAnchor1  event  quot  gt  lt p gt Click One lt  p gt  lt  a gt  lt  li gt     lt li gt  lt a routerLink  quot  quot   click   quot hitAnchor2  event  quot  gt  lt p gt Click Two lt  p gt  lt  a gt  lt  li gt   lt  ul gt   Step - 2  Call the above function to attach the click event to anchor tags  coming from ajax  in the  ts file    hitAnchor1 e         console log  quot Events quot   e         alert  quot You have clicked the anchor-1 tag quot           hitAnchor2 e         console log  quot Events quot   e         alert  quot You have clicked the anchor-2 tag quot          That s all  It work s as expected  I created the example below  You can have a look - https   stackblitz com edit angular-yn6q6t

User · Answer

You can use routerLink which is an alternative of href for angular 2    Use routerLink as below in html   lt a routerLink   dashboard  gt My Link lt  a gt    and make sure you register your routerLink in modules ts or router ts like this  const routes  Routes         path   dashboard   component  DashboardComponent

User · Answer

I ve been able to get this to work by simply using  routerLink        The square brackets inside the quotes is important  No need to prevent default actions in the method or anything  This seems to be similar to the      method but without needing to add that unclear syntax to the start of your method   So your full anchor tag would look like this     lt a  routerLink        click   clickMethod    gt Your Link lt  a gt    Just make sure your method works correctly or else you might end up refreshing the page instead and it gets very confusing on what is actually wrong

User · Answer

You can try something like this    lt a href  javascript  void 0     click   method    gt    OR   lt a href  javascript  void 0     routerLink      abc    gt

User · Answer

lt a href      click   onGoToPage2    gt Go to page 2 lt  a gt

User · Answer

I had to combine several of the answers to get a working solution    This solution will    Style the link with the appropriate  a  styles   Call the desired function  Not navigate to http   mySite      lt a href      click     functionToCall    gt Link lt  a gt

User · Answer

I have encountered this issue in Angular 5 which still followed the link  The solution was to have the function return false in order to prevent the page being refreshed   html   lt a href     click   openChangePasswordForm    gt Change expired password lt  a gt    ts  openChangePasswordForm    boolean     console log  openChangePasswordForm called       return false

User · Answer

I had issues with the page reloading but was able to avoid that with routerlink        lt a routerLink      click   myFunction    gt My Function lt  a gt    I received inspiration from the Angular Material docs on buttons  https   material angular io components button examples

User · Answer

lt a href  javascript void 0     click   onGoToPage2    gt Go to Page 2 lt  a gt

User · Answer

You just need to add    before your click method handler call   click     onGoToPage2     The    will prevent the default action from happening by converting the return of your method to a boolean  If it s a void method  then this will become false

User · Answer

I think you are not letting Angular work for you    In angular 2    Remove the href tag from  lt a gt  to prevent a page forwarding  Then just add your usual Angular click attribute and function  Add to style   cursor  pointer  to make it act like a button

[angular] Attaching click to anchor tag in angular

Examples related to angular

Examples related to anchor

Examples related to mouseclick-event