Angular make button not clickable?

Question

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?

Are you sure `res` is a boolean? Have you tried to log it? `console.log(res);` — Shahzad, Aug 19 '19 at 13:39
@Sal `this.existReview` is getting the value correcly, the problem is at disable binding or i don't know — Ilia Tapia, Aug 19 '19 at 13:41
If the res value is true then try using `[disabled]=existReview` — Prashanth Damam, Aug 19 '19 at 13:42
yes I used that and explain in the question it makes it button looks inactive but if I click it works normal and in this case I don't want the button direct me anywhere — Ilia Tapia, Aug 19 '19 at 13:44

score 3 · Answer 1 · answered Aug 19 '19 at 13:54

3

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;
}

answered Aug 19 '19 at 13:54

riorudo

977
7
14

this makes the job done but I have a small problem I need that matTooltip to be shown @riorudo – Ilia Tapia Aug 19 '19 at 14:03
You can try to change the css class like this: `.disable-click:active { pointer-events: none; cursor: default; }`. I found this solution [here](https://stackoverflow.com/a/31355432/8712609) – riorudo Aug 19 '19 at 14:27

score 2 · Accepted Answer · answered Aug 19 '19 at 13:50

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>

I think your answer helped me a lot to solve the problem that's why I will accept your answer, and please if you don't mind to vote my question, just want to have the opportunity to ask more question in the future and thank you for your help. — Ilia Tapia, Aug 20 '19 at 06:43

score 1 · Answer 3 · answered Aug 19 '19 at 13:43

1

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>

answered Aug 19 '19 at 13:43

Sergey Mell

7,780
1
26
50

this component has it already otherwise I would have get and error that was not part of it, what I am saying is that makes the button look inactive but if I click it, it does the same thing, with this, I only change the color of the button – Ilia Tapia Aug 19 '19 at 13:50
Please, provide the class and template of your PrimaryButton. StackBlitz example would be more than welcome – Sergey Mell Aug 19 '19 at 13:52

Angular make button not clickable?

3 Answers3