CODEWITHSUNDEEP
angularangularjsbuttonangular-formsangularjs-ng-disabled
Kishkin
Kishkin

Reputation: 7

How to disable buttons until another button is clicked in angular

Actually I am stuck in this thing .

What I want to do is that I have 3 buttons in my Component.html file in angular and what I need is that when I load the page only the button (Get Bank Details) should be enabled and the other two should be disabled then after I click the (Get Bank Details) button it should become disable now and the next button (See Bank Details) should be enable now leaving the other 2 buttons disabled and the when I click on (See Bank Details) button the 3rd button (Go to Update Bank) should now become enabled and the rest 2 diasabled.

If I explain in an easy manner

on Page Load :  1 Button - enabled , 2 Button - disabled , 3 Button - disabled
After 1 Button clicked : 1 Button - disabled , 2 Button - enabled , 3 Button - disabled
After 2 Button clicked : 1 Button - disabled , 2 Button - disabled , 3 Button - enabled

** This is the HTML code**

 <div style="width: 2000px; padding: auto;">
                            
                            <button id="button1" class="btn btn--radius-2 btn--red" type="submit" >Get Bank Details</button> | 
                            <button class="btn btn--radius-2 btn--red" type="submit" (click)="getBankById()" >See Bank Details</button> |
                            <button  class="btn btn--radius-2 btn--red" type="submit" (click)="router.navigate(['/home/patchBank']);">Go to Update Bank</button>
                        
                        </div>

Upvotes: 0

Views: 4660

Answers (2)

Simon245
Simon245

Reputation: 328

The easiest thing I can think of is just to have a boolean for each button

disableGetBankDetails = false;
seeBankDetails = true;

<button id="button1" [disabled]=[disableGetBankDetails] (click)="getBankDetails()" type="submit" >Get Bank Details</button>

<button [disabled]=[seeBankDetails]>See Bank Details</button>

When you click on the get bank details button, you change the values to what you need.

getBankDetails() {
    this.disableGetBankDetails = true;
    this.seeBankDetails = false;
}

Upvotes: 0

HassanMoin
HassanMoin

Reputation: 2194

You can create two boolean flags to check which button should be enabled and disabled and then use the [disabled] attribute to conditionally enable or disable the button. A small example would look like this:

seeBankDetailFlag: boolean;
goToUpdateBankFlag: boolean;

  ngOnInit(): void{
     this.seeBankDetailFlag = true;
     this.goToUpdateBankFlag = true;
  }

  getBankDetails(): void{
     this.seeBankDetailFlag = false;
  }

  getBankById(): void{
       this.seeBankDetailFlag = true;
       this.goToUpdateBankFlag = false;
  }

and then in your HTML you bind the flags with [disabled]

 <div style="width: 2000px; padding: auto;">
     <button id="button1" class="btn btn--radius-2 btn--red" type="submit" (click)="getBankDetails()" 
     [disabled]="!seeBankDetailFlag || !goToUpdateBankFlag">
        Get Bank Details
     </button>
     <button class="btn btn--radius-2 btn--red" type="submit" (click)="getBankById()" 
     [disabled]="seeBankDetailFlag">
         See Bank Details
     </button>
     <button class="btn btn--radius-2 btn--red" type="submit" (click)="router.navigate(['/home/patchBank']);" 
     [disabled]="goToUpdateBankFlag">
         Go to Update Bank
     </button>
 </div>

A simple stackblitz example: https://stackblitz.com/edit/angular-3hdcbk

Upvotes: 1

Related Questions