CODEWITHSUNDEEP
angular
Ilia Tapia
Ilia Tapia

Reputation: 649

Angular make button not clickable?

I need to make a button disable but I have tried several things and they don't work and I need to make the button base on the condition not clickable. like :

 [disabled]="existReview != false" // this make the button disable but still if i click the buttons takes me to the page normaly
 [disabled]="!existReview" // doesn't work
 ng-disabled="!existReview"// doesn't work .

my button looks like this :

 <app-primary-button *ngIf="!userIsPartner || !isLogged"
        routerLink="{{getAddReviewLink()}}" 
        ng-disabled="existReview != false"
        matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
        Write review
      </app-primary-button>

I give the boolean value in ts:

this.reviewService.verifyUserHaveReviewToApp(this.app.appIdToSearch)
      .subscribe((res) => {
        this.existReview = res;
      });

DO you have any idea what am I missing, thank you?

Upvotes: 1

Views: 13044

Answers (3)

riorudo
riorudo

Reputation: 1227

The button is disabled but the routerLink is still active. You can try to add an additional css class in order to disable click events...something like this:

<app-primary-button
[ngClass]="{'disable-click': disabled}"
...
/>

In your css:

.disable-click {
  pointer-events: none;
  cursor: default;
}

Upvotes: 4

Shahzad
Shahzad

Reputation: 2073

The problem here isn't the [disabled], your first use of it is fine. The problem is that routerLink doesn't care about the disabled attribute.

To get around this issue you can have two buttons:

<app-primary-button *ngIf="(!userIsPartner || !isLogged) && existReview"
    [disabled]="true"
    matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
    Write review
</app-primary-button>
<app-primary-button *ngIf="(!userIsPartner || !isLogged) && !existReview"
    routerLink="{{getAddReviewLink()}}"
    matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
    Write review
</app-primary-button>

Upvotes: 2

Sergey Mell
Sergey Mell

Reputation: 8040

Your <app-primary-button/> is a custom component. So it doesn't know anything about some disabled property. You should provide this property (you can name it whatever you want) and transfer it correctly to the inner button (I assume you have it inside), for example:

@Component({
  selector: 'app-primary-button',
  template: `
     <button [disabled]="disabled">My real button</button>
  `
  })
export class PrimaryButton {
  /**
  * Provide an input for the property
  * and use it in the template
  */
  @Input() disabled = false; 
}

Then you'l be able to use your custom button as <app-primary-button [disabled]="true"></app-primary-button>

Upvotes: 1

Related Questions