How to enable a disabled ionic button

Dear Friends,

Greetings! How can i enable a disabled ionic button when i call a function:

my html code is:

<ion-col class="lastcol">
<ion-button fill="outline" style="vertical-align: -webkit-baseline-middle" id="practiceBut" [disabled]="true">Practice</ion-button>
</ion-col class="lastcol">

my .ts code is:

ngOnInit(){
    this.disableBut('practiceBut');
  }

disableBut(butName){
    document.getElementById(butName).setAttribute('disabled','false');
  }

Thanks and Regards,
Syed Abdul Rahim

try this i hope its work
declare variable in you ts file

isenabled=true;

ngOnInit() {
    this.disableBut('false');
  }

disableBut(value){
    this.isenabled=value;
  }

here is your html

  <ion-col class="lastcol">
      <ion-button fill="outline" style="vertical-align: -webkit-baseline-middle" id="practiceBut" [disabled]="isenabled">Practice</ion-button>
      </ion-col>

Dear Mr.Ansari,

Assalam, i did exactly same its working in computer browser, but not working in ipad (after compiling and installed as app).

my code is
HTML:
<ion-button fill="outline" style="vertical-align: -webkit-baseline-middle" id="practiceBut" [disabled]="practiceButDisabled">Practice</ion-button>

.ts

window.addEventListener('message', (event) => {     
      this.checkEnableButtons(event.data);
}

checkEnableButtons(selLesDetails){
if(selLesDetails.F2D != undefined && selLesDetails.F2D != ""){
      this.twodButDisabled = 'false';
    }
}

selLesDetails.F2D contains name of the link.

so its not empty. its working fine in browser, but not working in ipad.

pls help me.

Thanks and Regards,
Syed Abdul Rahim

kindly show me your selLesDetails.F2D data

i put console.log() got below result:

{F2D: “D3_40_01_520/D3_40_01_520_1_2D.html”, F3D: “”, FAR: “”, FVR: “”, FPR: “”}
F2D: “D3_40_01_520/D3_40_01_520_1_2D.html”
F3D: “”
FAR: “”
FVR: “”
FPR: “”

try to declare boleen variable

twodButDisabled = true
checkEnableButtons(selLesDetails){
if(selLesDetails.F2D != undefined && selLesDetails.F2D != ""){
      this.twodButDisabled = false;
    }
}

Already i did this:

twodButDisabled = ‘true’;

i did not sent u in coding.

Even i tried as bolean (twodButDisabled = true) its not working in ipad, but in browser its working. if i call the same function checkEnableButtons(selLesDetails) when clicking some other button instead of

window.addEventListener('message', (event) => {     
      this.checkEnableButtons(event.data);
}

its working fine in ipad and browser.

There should not be any need to ever directly access document or window here. Angular is in charge of event management and updating; let change detection do its job. Do not use the != operator, ever. Only !==. But you almost never want to explicitly be checking for equality with undefined or ""; just let the concept of truthiness do its work here.

Try this simple example…

HTML:
<ion-button [disabled]=“isDisable”>{{text}}
<ion-button (click)=“unlockMe()” color=“light” *ngIf=“isDisable”>Unlock Button

TS:-
public isDisable:Boolean = true;
public text = ‘I am Dissabled! :(’

unlockMe() {
this.isDisable = false;
this.text = ‘I am Active! :D’
}

Screenshots:-
Before Clicking:-
image

After Clicking:-
image


Hope it helps Thanks…

1 Like