CODEWITHSUNDEEP
angularangular-template
Niladri Banerjee - Uttarpara
Niladri Banerjee - Uttarpara

Reputation: 2329

How to disable a particular button in Angular 7

I'm going to disable a particular button from a bunch of buttons as below:

<button name="paybtn-1" id="paybtn-1" (click)="myfunc(1)">Pay</button>
<button name="paybtn-2" id="paybtn-2" (click)="myfunc(2)">Pay</button>
<button name="paybtn-3" id="paybtn-3" (click)="myfunc(3)">Pay</button>

Say, I want to disable paybtn-1 when it clicked.

In the ts file, I pass the id of the button however, I stuck how can disable the particular button:

myfunc(id){
//
}

Upvotes: 1

Views: 7036

Answers (4)

Marco Augusto
Marco Augusto

Reputation: 13

In this case better way is to disabled button by disabled attribute.

Component:

 element: HTMLElement;    
disableButton(id) {
        this.element = document.getElementById(id) as HTMLElement;
        this.element.setAttribute('disabled', 'true');
      }
      enableButton(id) {
        this.element = document.getElementById(protocol) as HTMLElement;
        this.element.removeAttribute('disabled');
      }

HTML:

<button [id]="id" name="paybtn-1"(click)="myfunc(1)">Pay</button>

NOTE:

id is a var

This works fine for me.

Upvotes: 1

veben
veben

Reputation: 22262

To disable a button you can use [disabled], like that:

<button [disabled]="booleanCondition" name="paybtn-1" id="paybtn-1" (click)="myfunc(1)">Pay</button>

An you have to define the booleanCondition var in your .ts file

Upvotes: 2

Tobin
Tobin

Reputation: 2018

To keep in your style:

Add disabled property to the button

<button name="paybtn-1" id="paybtn-1" [disabled]='disabled["1"]' (click)="myfunc(1)">Pay</button>

Add method to apply disabled to this button

let disabled = {1:false,2:false,3:false}
myfunc(id){
disabled[id] = true
}

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222522

If You need to do this in proper way, have an array defined in your TS for each button and bind disalbed property to the button. Change it to false when clicking on the button.

Upvotes: 3

Related Questions