How to make button disable with true or false with property binding and without binding?

Question

    import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `<div>  
    <button [disabled]='isDisabled'>click</button>  
                     </div>`  
})  
export class AppComponent {  
isDisabled= false;  
}

Above angular code making button enable but below code without any data binding not enabling button regardless of true or false. please help me to understand what is wrong.

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `<div>  
    <button disabled=false>Disable me</button>  
                     </div>`  
})  
export class AppComponent {  

}

Slawa Eremin · Accepted Answer · 2022-03-11 09:25:24Z

1

There is difference between [disabled]="isDisabled" and disabled="false"

[disabled]="isDisabled" - you are changing property directly in the DOM through Angular, that's why you should pass true or false
disabled="false" - it's just simple html attribute, you can pass whatever you want even disabled="1", it will be counted as true anyway, if you want to enable button you should delete this attribute from html

edited Mar 11, 2022 at 9:25

answered Mar 10, 2022 at 20:35

Slawa Eremin

5,42521 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arturo Chen · Accepted Answer · 2022-03-10 21:25:26Z

0

If you don't use the square brackets, it will be treated as disabled, which is the intended use of this attribute:

<button disabled>Disabled</button>

You would have to add/remove the attribute to enable/disable the button with Javascript:

<button>Enabled</button>

Since you are in Angular, it's best to use square brackets on disabled and assign a boolean to it:

<button [disabled]="true">Disabled</button>
<button [disabled]="false">Enabled</button>

answered Mar 10, 2022 at 21:25

Arturo Chen

413 bronze badges

Collectives™ on Stack Overflow

How to make button disable with true or false with property binding and without binding?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related