CODEWITHSUNDEEP
htmlangular
hatched
hatched

Reputation: 865

How do I disable toggle button?

I want to display toggle button in HTML with disabled.

My button code:

<td >
    <div class="toggle" [class.on]="isActive" (click)="function(no)">
    <div class="toggle-btn"></div>
    </div>
</td>

I've tried to put disabled:

<div class="toggle" [class.on]="isActive" (click)="function(no) disabled">

And:

<div class="toggle-btn" disabled></div>

But it doesn't work. Any solutions?

Upvotes: 0

Views: 7016

Answers (4)

hatched
hatched

Reputation: 865

I have found own solution by just adding CSS

pointer-events:none

Upvotes: 2

wentjun
wentjun

Reputation: 42596

You should use the html <button> instead of <div>, as the disabled attribute is available on the button tag. You can even bind the disabled attribute.

<button type="button" class="toggle" (click)="function(no)" [disabled]="isDisabled">Submit</button>

On your component.ts, you can simple toggle the disabled attribute by setting it to true or false.

this.isDisabled = true; // disables button

Alternatively, if you are planning to bind the disabled attribute to any properties, you can still dynamically disable the button by using Document.querySelector() to get the element, and then set the disabled attribute to true.

const button = document.querySelector('.button');
button['disabled'] = true;

Upvotes: 0

mojtaba ramezani
mojtaba ramezani

Reputation: 1559

Use ngClass in html: 

<button type="button" [ngClass]="{'disabled-btn': isDisabled}">Submit</button>

ts file, manage isDisabled variable: 

this.isDisabled = true;

in css, adding style to disabled-btn class:

.disabled-btn {
      pointer-events: none;
      opacity: 0.3;
}

Upvotes: 2

Chirag
Chirag

Reputation: 413

Use this

<button type="button" [disabled]="true">Submit</button >

Upvotes: 0

Related Questions