How to disable div tag in angular 2

Question

I am trying to disable the div tag after successfully invoking this action.

see my ionic content

<ion-content padding class="forgot-password"> <div [ngClass]="{active: isOn,disabled: isDisabled}"> <ion-item> <ion-label floating>Email/Mobile</ion-label> <ion-input type="text" [(ngModel)]="loginId"></ion-input> </ion-item> <br><br> <button class="float-right" (click)="generateOTP(!isOn);">Send OTP</button><br><br><br> </div> <br> <div *ngIf="showRePasswd"> <ion-item> <ion-label floating>Enter OTP</ion-label> <ion-input type="text" [(ngModel)]="passwd"></ion-input> </ion-item> <br><br> <button class="float-right" (click)="resetPassword();">Send Password</button> </div> </ion-content> 

here is my .ts file

 export class ForgotPasswordPage { public loginId = ""; public passwd = ""; public showRePasswd = false; isDisabled = false; isOn = false; constructor(private navCtrl: NavController, private logger: Logger, private user: Users) { } generateOTP(newstate) { this.logger.info("invoking generateOTP FN"); var _this = this; this.user.generateOTP(this.loginId, function(result,data){ if(result == '1') { alert(data); _this.showRePasswd = !_this.showRePasswd; _this.isDisabled = true; _this.isOn = newstate; } else { //this.showRePasswd = this.showRePasswd; alert(data); } }) } resetPassword() { this.logger.info("invoking resetPassword FN"); var _this = this; this.user.resetPassword(this.passwd, function(result,data) { if(result == '1') { alert(data); _this.navCtrl.push(LoginPage); } else { alert(data); } }) } } 

I tried [ngClass] , but I can’t disable my div tag after a successful callback.

I also tried using [disabled] but did not work

Here is a demo to disable the div tag, but in my case it doesn't work

My requirement is for my input field and button to be disabled after a successful callback

Answer 1

You can add attribute as

 <div [attr.disabled]="isDisabled ? true : null"> 

but the <div> does not support the disabled attribute.

Perhaps this is what you want

 <div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null" [class.isDisabled]="isDisabled"></div> 

with some custom CSS that makes .isdisabled look disabled.

Perhaps it would be better to create a method to place the code instead of the built-in one.

Answer 2

A div element cannot be disabled, like form elements. You can disable form controls in a div.

The above example has a custom class of "disabled"

 styles: [` .button { width: 120px; border: medium solid black; } .active { background-color: red; } .disabled { color: gray; border: medium solid gray; } `]