How to disable the div tag in angular 2

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


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.

Tags:

Angular

Ionic2