How to disable the div tag in angular 2

Question

I am trying to disable the div tag after a success callback of that action.

please look my ion-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 am not able to make my div tag disable after the success callback.

I also tried using [disabled] but not working

Here is a demo for disable a div tag but in my case not working

My requirement is to make my input field and button to be disabled after success callback

Phonography

Answer 1

You can add the attribute like

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

but <div> doesn't 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 .isDiabled look disabled.

It might be better to create a method to put the code there instead of inline.

Apthorp

insted of using ngClass i tried your answer but still i was able to edit my input field in my div tag – Phonography

div can't be disabled (HTML limitation, not an Angular2 limitation). You can set the disabled attribute and apply CSS to it or you set disabled on all child elements that actually can be disabled individually. – Wisteria

To add to what @MohanGopi said, (click) event of the div that has [attr.disabled] set is also generated. So we cannot disable the clicks of that div. – Surveillance

You can use <div>(click)="$event.preventDefault();false"</div> – Wisteria

Ok, Can we make it conditional also? like if not disabled , (click) calls a method, and if disabled, uses what you mentioned. – Surveillance

Right, also I changed preventDefault to stopPropagation. See also #35274528 – Wisteria

@ritesh I can't make any sense of your comment – Wisteria

[class.isDisabled] this does not works and gives a parser error. – Tailband

@ritesh can you reproduce in a Plunker or at least provide the exact error message. There is nothing I can do with the information you provided. It's definitely valid Angular binding syntax. – Wisteria

@GünterZöchbauer : ritesh is correct, you have so many comments, you give valid comments, but you write perhaps that perhaps this, etc. etc. your html is also not valid, you close div 2 times ( <div>(click) ), write the correct answer in answer, not in comments (start with, this can't be done, you can simulate this way) – Lynching

For those who need the CSS, its pointer-events: none; – Nineteenth

Answer 2

You can use CSS property pointer-events: none; in your tag div:

<ion-content padding class="forgot-password">
  <div style="pointer-events: none;">
   ...
  </div>
</ion-content>

Grissel

Answer 3

This is used in my Angular 8 project: First set to HTML file like below. Set to Div tag ngClass=>

<div class="col-md-3" [ngClass]="{disabledNoOfCasesDiv: !isActiveNOofCasesNo}>
<label class="control-label mb-2">No. of Cases Receive</label>
<input type="number" class="form-control" [(ngModel)]="CollectJob.NoOfCases"
placeholder="No. Cases Receive" name="NoCasesReceive">
</div>

Then next step write CSS for disabling events:

.disabledNoOfCasesDiv{ pointer-events: none; opacity: 2.0;}

Then last:

declare the variable and set to boolean

 isActiveNOofCasesNo: boolean;

Then next just pass true/false values wherever you want to enable div tag or disable div tag, div will automatically enabled or disabled.

this.isActiveNOofCasesNo = true;
this.isActiveNOofCasesNo = false;

Thank You..... Happy Learning!...:) angular html css ionic typescript

Homogenize

Answer 4

You Can easily enable/disable the DOM elements using the Angular Directives :-

Create a Simple Directive - DisableDirective

import { AfterViewInit, Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';

const DISABLED = 'disabled';
const APP_DISABLED = 'app-disabled';
const TAB_INDEX = 'tabindex';
const TAG_ANCHOR = 'a';

@Directive({
  selector: '[appDisable]'
})
export class DisableDirective implements OnChanges, AfterViewInit {

  @Input() appDisable = true;

  constructor(private eleRef: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    this.disableElement(this.eleRef.nativeElement);
  }

  ngAfterViewInit() {
    this.disableElement(this.eleRef.nativeElement);
  }

  private disableElement(element: any) {
    if (this.appDisable) {
      if (!element.hasAttribute(DISABLED)) {
        this.renderer.setAttribute(element, APP_DISABLED, '');
        this.renderer.setAttribute(element, DISABLED, 'true');

        // disabling anchor tab keyboard event
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          this.renderer.setAttribute(element, TAB_INDEX, '-1');
        }
      }
    } else {
      if (element.hasAttribute(APP_DISABLED)) {
        if (element.getAttribute('disabled') !== '') {
          element.removeAttribute(DISABLED);
        }
        element.removeAttribute(APP_DISABLED);
        if (element.tagName.toLowerCase() === TAG_ANCHOR) {
          element.removeAttribute(TAB_INDEX);
        }
      }
    }
    if (element.children) {
      for (let ele of element.children) {
        this.disableElement(ele);
      }
    }
  }
}

Now Use this directive with your component div :-

<div [appDisable]="true">
</div>

Note - Not to forget register Directive in your AppModule.

Please Refer the POST for the detailed discription.

Nickels

It only works on pure divs. If the divs contains material element, it is not working. – Cent

Answer 5

HTML file

div [ngClass]="condition"

ts file

this.condition = 'mydisable';

css file

.mydisable {
  pointer-events: none;
}

Ehling

Answer 6

Div element cannot be disabled like form controls. You can disable form controls in div instead.

Provided example has custom class "disabled"

styles: [`
    .button {
      width: 120px;
      border: medium solid black;
    }

    .active {
      background-color: red;
    }

    .disabled {
      color: gray;
      border: medium solid gray;
    }
  `] 

Exum

I really don't understand what u want to achieve. Can you provide a desired effect? [ngClass]="{active: isOn,disabled: isDisabled}">is in your template file. – Exum

@MohanGopi you can also build a custom container (directive) that will disable all children on demand. – Exum

Answer 7

in html

<div[appViewDisable]="disable_condition">

in .ts

disable_condition = True or False

True will disable the content init.

Peipus

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Tsuda