How can I conditionally disable the routerLink attribute?

by

Disable pointer-events on the element via CSS:

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

a.disabled {
   pointer-events: none;
   cursor: default;
}

See also Angular2, what is the correct way to disable an anchor element?

or

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

or to easily reuse the disabled link template

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a>

More Related Contents:

  1. How to detect a route change in Angular?
  2. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  3. How to determine previous page URL in Angular?
  4. How to go back last page
  5. Angular: Cannot find a differ supporting object ‘[object Object]’
  6. Angular2 multiple router-outlet in the same template
  7. Warn user of unsaved changes before leaving page
  8. Passing data into “router-outlet” child components
  9. Angular2: Make route paths case insensitive
  10. Angular 2 Scroll to top on Route Change
  11. How to pass query parameters with a routerLink
  12. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  13. Angular2 – Redirect to calling url after successful login
  14. Angular2 – Interaction between components using a service
  15. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  16. Angular2 router keep query string
  17. Angular2 router.navigate refresh page
  18. Multiple canActivate guards all run when first fails
  19. Angular 2 router resolve with Observable
  20. Can’t reload/refresh active route
  21. Lazy Loading BrowserModule has already been loaded
  22. How do I navigate to a sibling route?
  23. Redirect to a different component inside @CanActivate in Angular2
  24. Pass parameter into route guard
  25. Want to prevent Component recreation while routing in Angular 2
  26. New Angular2 router configuration
  27. Angular routerLink does not navigate to the corresponding component
  28. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. Angular 2 different components with same route

Leave a Comment