Disable a link in angular 2+

Question

I'm attempting to disable a link until an API call is made in Angular 6. I want the link to be disabled until the getSelectedDealer() API is returned.

 <menu-link *ngIf="perms.has(perms.TOP_OFFERS) && _dealerPersistenceService.getSelectedDealer()"
           route="/dynamic-journeys/{{getDealerId()}}/vehicles">
    <menu-item><img src="/assets/menu-icons/top-offers.svg">Dynamic Journeys</menu-item>
</menu-link>

Here is the code for the 'a' tag component and the CSS.

<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null">
<ng-content select="menu-item"></ng-content>

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

Basically I need the 'menu-link' items to be disabled prior to API call and be enabled after.

Answer 1

If you want to use no matter what, you could achieve that by simply add click event to this link with something like that:

<a [routerLink]="route"
   routerLinkActive="active"
   class="menu-link"
   [class.disabled]="disabled ? true: null"
   (click)="check($event)">

In TS:

isReady = false;
check = (event) => {
 if (!this.isReady) {
   event.preventDefault();
 }
}

So isReady is a boolean variable of your component, and it is false until you want to. When ever you click this link, it will check if it is true, but if it is false, it will prevent the original behavior of the event, and nothing will fire.