Angular2 what is the correct way to disable an anchor element

Question

I m working on an Angular2 application  and I need to display -- but disable an  lt a gt  HTML element  What is the correct way to do this   Updated  Please note the  ngFor  this would prevent the option of using  ngIf and not rendering the  lt a gt  altogether    lt a  ngFor  let link of links     href          class disabled   isDisabled link        click   onClick link   gt        link name     lt  a gt    The TypeScript component has a method that looks like this   onClick link  LinkObj           Do something relevant with the object         return false      I need to actually prevent the element from being clickable  not just appear that it is with the CSS  I was assuming that I needed to potentially bind to the  disabled  attribute at first  but this is incorrect as the anchor element doesn t have a disabled property   I looked at and considered using the pointer-events  none but this prevents my style of cursor  not-allowed from working -- and this is part of the requirement

User · Answer

This is for anchor tags that act as tabs   ngStyle   quot   pointer-events   isSaving    none    auto   quot

User · Answer

disabled  pointer-events  none     will disable the click event  but not the tab event  To disable the tab event  you can set the tabindex to -1 if the disable flag is true    lt li  routerLinkActive     active     class disabled   isDisabled  gt        lt a  routerLink     link    tabindex    isDisabled -1 0     gt  Menu Item lt  a gt   lt  li gt

User · Answer

Specifying pointer-events  none in CSS disables mouse input but doesn t disable keyboard input  For example  the user can still tab to the link and  click  it by pressing the Enter key or  in Windows  the   Menu key  You could disable specific keystrokes by intercepting the keydown event  but this would likely confuse users relying on assistive technologies   Probably the best way to disable a link is to remove its href attribute  making it a non-link  You can do this dynamically with a conditional href attribute binding    lt a  ngFor  let link of links      attr href   isDisabled link    null            class disabled   isDisabled link       click    isDisabled link   amp  amp  onClick link   gt        link name     lt  a gt    Or  as in G  nter Z  chbauer s answer  you can create two links  one normal and one disabled  and use  ngIf to show one or the other    lt ng-template ngFor  link  ngForOf   links  gt       lt a  ngIf   isDisabled link   href      click   onClick link   gt    link name    lt  a gt       lt a  ngIf  isDisabled link   class  disabled  gt    link name    lt  a gt   lt  ng-template gt    Here s some CSS to make the link look disabled   a disabled       color  gray      cursor  not-allowed      text-decoration  underline

User · Answer

Just use    lt a  ngClass     disabled   your condition   gt  This a tag is disabled lt  a gt    Example     lt a  ngClass     disabled   name   junaid    gt  This a tag is disabled lt  a gt

User · Answer

consider the following solution   disable-anchor-tag      pointer-events  none

User · Answer

Just came across this question  and wanted to suggest an alternate approach   In the markup the OP provided  there is a click event binding  This makes me think that the elements are being used as  buttons   If that is the case  they could be marked up as  lt button gt  elements and styled like links  if that is the look you desire   For example  Bootstrap has a built-in  link  button style  https   v4-alpha getbootstrap com components buttons  examples   This has several direct and indirect benefits  It allows you to bind to the disabled property  which when set will disable mouse and keyboard events automatically  It lets you style the disabled state based on the disabled attribute  so you don t have to also manipulate the element s class  It is also better for accessibility   For a good write-up about when to use buttons and when to use links  see Links are not buttons  Neither are DIVs and SPANs

User · Answer

My answer might be late for this post  It can be achieved through inline css within anchor tag only       lt a  routerLink      user     style pointer-events   isDisabled   none   auto   gt click-label lt  a gt   Considering isDisabled is a property in component which can be true or false   Plunker for it   https   embed plnkr co TOh8LM

User · Answer

You can try this   lt a  attr disabled   someCondition   true  null  gt  lt  a gt

User · Answer

I have used    tabindex    isEditedParaOrder -1 0      style pointer-events   isEditedParaOrder   none   auto      in my anchor tag so that they can not move to anchor tag by using tab to use  enter  key and also pointer itself we are setting to  none  based on property  isEditedParaO rder  whi

User · Answer

For  routerLink  you can use   Adding this CSS should do what you want   a disabled      pointer-events  none     cursor  not-allowed         This should fix the issue mentioned by  MichelLiu in the comments    lt a href      class disabled   isDisabled link        keydown enter    isDisabled link   gt    link name    lt  a gt    Another approach   lt a  routerLink     Other     ngIf   isDisabled link   gt    link name    lt  a gt   lt a   ngIf  isDisabled link   gt    link name    lt  a gt      Plunker example

[html] Angular2, what is the correct way to disable an anchor element?

Examples related to html

Examples related to dom

Examples related to typescript

Examples related to angular

Examples related to angular2-template