disable router navigation in angular, mouse hover action should be working

Asked Feb 25 '19 at 18:07

Active Feb 25 '19 at 18:26

Viewed 500 times

below is the code:

    <a [routerLink]="[ {outlets: { childModal: [targetType.routeName] } } ]" [ngClass]="{'disabled':isDisable}" title = "why popup is disabled" (click)="onTargetTypeClicked($event)">
          Click-Me
    </a>

//CSS-code
    .disabled {
        opacity: 0.5;
        cursor: default !important;
        pointer-events: none !important;
    }

//JS-code
onTargetTypeClicked(event: any) {
    event.preventDefault();
    event.stopPropagation();
    return false;
 }

tried in both the ways CSS(hover is not working). JS(yet, my link is navigating. )

Note: i need to block user doing action & on mouse-hover user should be notified why it's blocked.

https://stackblitz.com/edit/angular-router-basic-example-5va1ro

edited Feb 25 '19 at 18:26

asked Feb 25 '19 at 18:07

Pawan

Please provide a working sample on [stackblitz](https://stackblitz.com/) – Batajus Feb 25 '19 at 18:09
See this question: https://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element – Rob_M Feb 25 '19 at 18:13
updated with Stackblitz – Pawan Feb 25 '19 at 18:27
Try changing your routerLink binding to: [routerLink]="isDisable ? null : '/catalog'" – BKR Feb 25 '19 at 19:47

disable router navigation in angular, mouse hover action should be working

0 Answers0