title: Conditionally disable router link in Angular
body: <p>I have a number of link in an Angular project (using Angular 2), similar to:</p>
  
  <pre><code>&lt;a [routerLink]="..."
       [routerLinkActive]="..."
       [routerLinkActiveOptions]="..."&gt;
      Link
  &lt;/a&gt;
  </code></pre>
  
  <p>I would like to disable some of these depending on the context/state (by changing the color and preventing the action from happening).</p>
  
  <hr>
  
  <p>For styling, I have added to the link:</p>
  
  <pre><code>[class.disabled]="!isValidLink()"
  </code></pre>
  
  <hr>
  
  <p>This lets me show the links as disabled, but I still need to prevent the routing. If I add a <code>target="_self"</code> to the element, it prevents routing, but I need to do this conditionally, depending on some state.</p>
  
  <p>Is there any supported routing way of doing this, or some other implementation that would work?</p>
  
  <hr>
  
  <p><strong>Edit:</strong> Setting <code>pointer-events</code> to none in css would prevent clicking on the link, but am looking for a solution which would prevent keyboard events from triggering it too.</p>